Merge pull request #645 from Countly/content-proxy-support

Content proxy support

Author: turtledreams

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 26.1.3
+
+- Added support for Feedback Widgets and Content working with certain proxy configurations.
+
 ## 26.1.2
 
 - Delayed remote config refresh after merged device ID changes to reduce request ordering races.

cypress/e2e/bridged_utils.cy.js

@@ -15,7 +15,7 @@ function initMain(name, version) {
 }
 
 const SDK_NAME = "javascript_native_web";
-const SDK_VERSION = "26.1.2";
+const SDK_VERSION = "26.1.3";
 
 // tests
 describe("Bridged SDK Utilities Tests", () => {

cypress/e2e/content_proxy_path.cy.js

@@ -0,0 +1,70 @@
+/* eslint-disable require-jsdoc */
+var Countly = require("../../lib/countly");
+var hp = require("../support/helper.js");
+
+// The Cypress test server (see cypress.config.js) answers /o/sdk/content with:
+//   { html: "http://test/_external/content?id=111&uid=tester&app_id=222", geo: {...} }
+// i.e. a full URL on a foreign origin/path, exactly like a server that doesn't know it is
+// behind a reverse proxy. #displayContent must rebase it onto the SDK's configured url.
+
+describe("Content proxy path rebasing", () => {
+    afterEach(() => {
+        cy.task("stopServer");
+    });
+
+    it("rebases the iframe src onto the SDK url and appends the encoded provided_url path", () => {
+        hp.haltAndClearStorage(() => {
+            cy.task("setResponseDelay", 0);
+            cy.task("startServer");
+            Countly.init({
+                app_key: "YOUR_APP_KEY",
+                url: "http://localhost:9000/countly", // proxied: Countly reached under a /countly prefix
+                debug: true
+            });
+            Countly.content.enterContentZone();
+            // enterContentZone waits ~4s after init before firing the first request
+            cy.wait(6000).then(() => {
+                var iframe = document.getElementById("cly-content-iframe");
+                expect(iframe, "content iframe should be created").to.exist;
+                // server returned http://test/_external/content?...; rebased onto this.url with
+                // provided_url appended (path only, encoded) so the content page's assets resolve
+                expect(iframe.getAttribute("src")).to.eq(
+                    "http://localhost:9000/countly/_external/content?id=111&uid=tester&app_id=222&provided_url=%2Fcountly"
+                );
+            });
+        });
+    });
+});
+
+describe("parseUrlParts helper", () => {
+    beforeEach(() => {
+        hp.haltAndClearStorage(() => {
+            Countly.init({ app_key: "YOUR_APP_KEY", url: "https://your.domain.count.ly", test_mode: true });
+        });
+    });
+
+    it("splits an absolute URL into origin/path/query/hash", () => {
+        var parts = Countly._internals.parseUrlParts("http://localhost:9000/reverse-proxy/countly/feedback/rating?a=1#frag");
+        expect(parts.origin).to.eq("http://localhost:9000");
+        expect(parts.pathname).to.eq("/reverse-proxy/countly/feedback/rating");
+        expect(parts.search).to.eq("?a=1");
+        expect(parts.hash).to.eq("#frag");
+    });
+
+    it("treats a scheme-less (relative) URL as an empty origin and a full path", () => {
+        var parts = Countly._internals.parseUrlParts("/reverse-proxy/countly");
+        expect(parts.origin).to.eq("");
+        expect(parts.pathname).to.eq("/reverse-proxy/countly");
+    });
+
+    it("returns an empty path for an origin with no path", () => {
+        var parts = Countly._internals.parseUrlParts("https://main.server.ly");
+        expect(parts.origin).to.eq("https://main.server.ly");
+        expect(parts.pathname).to.eq("");
+    });
+
+    it("is safe for non-string input", () => {
+        var parts = Countly._internals.parseUrlParts(undefined);
+        expect(parts).to.eql({ origin: "", pathname: "", search: "", hash: "" });
+    });
+});

cypress/e2e/feedback_widget_provided_url.cy.js

@@ -0,0 +1,52 @@
+/* eslint-disable require-jsdoc */
+var Countly = require("../../lib/countly");
+var hp = require("../support/helper.js");
+
+function initWithUrl(url) {
+    Countly.init({
+        app_key: "YOUR_APP_KEY",
+        url: url,
+        test_mode: true,
+        debug: true
+    });
+}
+
+var npsWidget = { _id: "widget123", type: "nps" };
+
+function presentedIframeSrc() {
+    var iframe = document.getElementById("countly-surveys-iframe");
+    expect(iframe, "surveys iframe should be created").to.exist;
+    return iframe.getAttribute("src");
+}
+
+describe("Feedback widget provided_url parameter", () => {
+    it("sends the path prefix (path only, encoded) when the SDK url has one", () => {
+        hp.haltAndClearStorage(() => {
+            initWithUrl("https://your.domain.count.ly/reverse-proxy/countly");
+            Countly.present_feedback_widget(npsWidget);
+            var src = presentedIframeSrc();
+            // Server rejects any value with ":" or "//", so we send the pathname only.
+            expect(src).to.include("provided_url=" + encodeURIComponent("/reverse-proxy/countly"));
+            // The origin/scheme must never leak into the value.
+            expect(src).to.not.include("provided_url=https");
+        });
+    });
+
+    it("resolves the path prefix for a same-origin (relative) SDK url", () => {
+        hp.haltAndClearStorage(() => {
+            initWithUrl("/reverse-proxy/countly");
+            Countly.present_feedback_widget(npsWidget);
+            var src = presentedIframeSrc();
+            expect(src).to.include("provided_url=" + encodeURIComponent("/reverse-proxy/countly"));
+        });
+    });
+
+    it("omits provided_url entirely when the SDK url has no path prefix", () => {
+        hp.haltAndClearStorage(() => {
+            initWithUrl("https://your.domain.count.ly");
+            Countly.present_feedback_widget(npsWidget);
+            var src = presentedIframeSrc();
+            expect(src).to.not.include("provided_url");
+        });
+    });
+});

cypress/e2e/sdk_info.cy.js

@@ -3,7 +3,7 @@
 var Countly = require("../../lib/countly");
 var hp = require("../support/helper.js");
 const SDK_NAME = "javascript_native_web";
-const SDK_VERSION = "26.1.2";
+const SDK_VERSION = "26.1.3";
 
 function initMain(name, version) {
     Countly.init({

lib/countly.js

@@ -350,7 +350,7 @@
         backoffCount: "cly_hc_backoff_count",
         consecutiveBackoffCount: "cly_hc_consecutive_backoff_count"
     });
-    var SDK_VERSION = "26.1.2";
+    var SDK_VERSION = "26.1.3";
     var SDK_NAME = "javascript_native_web";
 
     // Using this on document.referrer would return an array with 17 elements in it. The 12th element (array[11]) would be the path we are looking for. Others would be things like password and such (use https://regex101.com/ to check more)
@@ -1092,6 +1092,39 @@
         }
     }
 
+    /**
+     * Split a URL string into its parts using the shared urlParseRE regex. Kept regex-based
+     * (rather than the URL constructor) to preserve IE11 support, and it needs no DOM access.
+     * Relative URLs (no scheme/host) return an empty origin and everything in pathname.
+     * @memberof Countly._internals
+     * @param {String} urlString - URL to parse
+     * @returns {Object} object with origin, pathname, search and hash string properties
+     */
+    function parseUrlParts(urlString) {
+        var parts = {
+            origin: "",
+            pathname: "",
+            search: "",
+            hash: ""
+        };
+        if (typeof urlString !== "string") {
+            return parts;
+        }
+        var matches = urlParseRE.exec(urlString);
+        if (!matches) {
+            return parts;
+        }
+        // matches[4] = "protocol:", matches[10] = "host[:port]", matches[13] = path,
+        // matches[16] = "?query", matches[17] = "#hash" (see urlParseRE comments in Constants.js)
+        if (matches[4] && matches[10]) {
+            parts.origin = matches[4] + "//" + matches[10];
+        }
+        parts.pathname = matches[13] || "";
+        parts.search = matches[16] || "";
+        parts.hash = matches[17] || "";
+        return parts;
+    }
+
     var _consentTimer = /*#__PURE__*/new WeakMap();
     var _self = /*#__PURE__*/new WeakMap();
     var _global = /*#__PURE__*/new WeakMap();
@@ -5104,6 +5137,15 @@
                 // Origin is passed to the popup so that it passes it back in the postMessage event
                 // Only web SDK passes origin and web
                 url += "&origin=" + passedOrigin;
+                // Pass the path prefix (if any) for reverse proxy scenarios. The server only accepts a
+                // same-origin relative path, so we send just the pathname and omit it when there is none.
+                var providedPath = "";
+                if (_this.url) {
+                    providedPath = stripTrailingSlash(parseUrlParts(_this.url).pathname);
+                }
+                if (providedPath) {
+                    url += "&provided_url=" + encodeURIComponent(providedPath);
+                }
                 url += "&widget_v=web";
                 var iframe = document.createElement("iframe");
                 iframe.src = url;
@@ -5714,13 +5756,31 @@
         });
         _classPrivateFieldInitSpec(this, _displayContent, function (response) {
             try {
+                //   1. rebase html onto dev provided url so the content page loads from the right path
+                //   2. pass the SDK path prefix as provided_url
+                var contentUrl = response.html;
+                if (typeof contentUrl === "string") {
+                    var parts = parseUrlParts(contentUrl);
+                    var base = parts.origin + parts.pathname;
+                    if (_this.url && contentUrl.indexOf(_this.url) !== 0) {
+                        base = stripTrailingSlash(_this.url) + parts.pathname;
+                    }
+                    var search = parts.search;
+                    var providedPath = _this.url ? stripTrailingSlash(parseUrlParts(_this.url).pathname) : "";
+                    if (providedPath) {
+                        // insert into the query (before any #hash); server ignores values with ':' or '//'
+                        search += (search ? "&" : "?") + "provided_url=" + encodeURIComponent(providedPath);
+                    }
+                    contentUrl = base + search + parts.hash;
+                    _classPrivateFieldGet2(_log, _this).call(_this, logLevelEnums.DEBUG, "displayContent, Content iframe URL:[" + contentUrl + "]");
+                }
                 var iframe = document.createElement("iframe");
                 iframe.id = _classPrivateFieldGet2(_contentIframeID, _this);
                 // always https in the future
                 // response.html = response.html.replace(/http:\/\//g, "https://");
-                iframe.src = response.html;
+                iframe.src = contentUrl;
                 iframe.style.position = "absolute";
-                if (response.html.indexOf("feedback/survey") != -1) {
+                if (contentUrl.indexOf("feedback/survey") != -1) {
                     // for surveys to scroll with the page (nps is not in journeys yet)
                     iframe.style.position = "fixed";
                 }
@@ -5742,7 +5802,13 @@
             }
         });
         _classPrivateFieldInitSpec(this, _interpretContentMessage, function (messageEvent) {
-            if (_this.contentWhitelist.indexOf(messageEvent.origin) === -1) {
+            // messageEvent.origin is always origin-only (scheme://host[:port]), while whitelist
+            // entries (including this.url) may carry a path prefix behind a reverse proxy. Compare
+            // by origin so proxied content (served from this.url's origin) is not rejected.
+            var isWhitelistedOrigin = Array.isArray(_this.contentWhitelist) && _this.contentWhitelist.some(function (entry) {
+                return parseUrlParts(entry).origin === messageEvent.origin;
+            });
+            if (!isWhitelistedOrigin) {
                 // this.#log(logLevelEnums.ERROR, "interpretContentMessage, Received message from invalid origin");
                 // silent ignore
                 return;
@@ -7417,6 +7483,7 @@
             truncateObject: truncateObject,
             truncateSingleValue: truncateSingleValue,
             stripTrailingSlash: stripTrailingSlash,
+            parseUrlParts: parseUrlParts,
             prepareParams: prepareParams,
             sendXmlHttpRequest: _classPrivateFieldGet2(_sendXmlHttpRequest, this),
             isResponseValid: _classPrivateFieldGet2(_isResponseValid, this),
@@ -7889,4 +7956,4 @@
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-}));   
+}));