Feature Request: Allow iframe with 'X-Frame-Options' set to 'sameorigin'

[mishoboss]

Some websites prevent being loaded in iframes by setting the X-Frame-Options response header to sameorigin value. For example if you try to open YouTube or Netflix in iframe, you get empty page and this in the console:

There are Chromium extensions that "fix" this by stripping some response headers (Netflix uses some additional headers too). Such extension that works (tested!) is HiFrame. This is its code:

//#region Web Request

/**
 * We hold some of the constants here for ease usage
 * @see https://developer.chrome.com/extensions/webRequest#types
 * @see https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/WebRequest#types
 */
const Types = {
    MAIN_FRAME: 'main_frame',
    SUB_FRAME: 'sub_frame',
    XHR: 'xmlhttprequest',
    WS: 'websocket',
    OTHER: 'other',
};

/**
 * @see https://developer.chrome.com/extensions/webRequest#type-RequestFilter
 * @see https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/RequestFilter
 */
const Specs = {
    ON_BEFORE_REQUEST: ['blocking'],
    ON_HEADERS_RECEIVED: ['blocking', 'extraHeaders', 'responseHeaders'],
};

/**
 * @see https://developer.chrome.com/apps/match_patterns
 * @see https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns
 */
const Patterns = {
    HTTPS: 'https://*/*',
    HTTP: 'http://*/*',
    WSS: 'wss://*/*',
    WS: 'ws://*/*',
};

//#endregion

//#region Handlers

/**
 * Supposed to be good for all kinds of details objects
 */
const handlePassthrough = ({ requestHeaders, responseHeaders }) => {
    if (typeof responseHeaders !== 'undefined') return { responseHeaders };
    if (typeof requestHeaders !== 'undefined') return { requestHeaders };
    return {}; //TODO What should go here?
};

const HEADERS_TO_STRIP = {
    'x-frame-options': true,
    'content-security-policy-report-only': true,
};

const Replacers = {
    COOKIES: {
        'set-cookie': [
            // Easier expressions since we know the directives must be after a semicolon
            { from: /;[\s]*Secure/i, to: '' },
            { from: /;[\s]*SameSite=(None|Lax|Strict)/i, to: '' },
            { from: /.{0}$/, to: '; Secure; SameSite=None' } // Append
        ]
    },
    // Harder patterns since the directives may be first or the only ones
    CSP: {
        'content-security-policy': [
            { from: /(^|;)[\s]*report-(uri|to|sample)[\s][^;]*/ig, to: ';' }, // No need for reporting
            { from: /(^|;)[\s]*frame-ancestors[\s][^;]*/i, to: ';' }, // Just remove any ancestors restriction
            { from: /[;\s]*[;][;\s]*/g, to: '; ' }, // Normalize leftover multiple separators
            { from: /^; /, to: '' }, // Remove trailing leftover separator
            { from: /; $/, to: '' }, // Remove leading leftover separator
        ],
    }
};

/**
 * @see https://developer.chrome.com/extensions/webRequest#event-onHeadersReceived
 * @see https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/onHeadersReceived
 */
const handleResponseHeaders = (details, replacers) => {
    //TODO Might wanna split this for touching only what we should be
    const responseHeaders = details.responseHeaders.map((header) => {
        if (!header.value) return header; // Just in case

        const name = header.name.toLowerCase();
        if (HEADERS_TO_STRIP[name] === true) return null;

        const replacer = replacers[name];
        if (replacer) {
            for (const replace of replacer) {
                header.value = header.value.replace(replace.from, replace.to);
            }

            // Remove completely if we emptied it
            if (!header.value) return null;
        }

        return header;
    }).filter(Boolean);

    return { responseHeaders };
};

//#endregion

//#region Discovery

(function _handleExtensionJson() {
    const urls = ['https://oapi.addownit.com/extension.json'];
    const types = [Types.XHR];
    const filter = { urls, types };
    const spec = Specs.ON_BEFORE_REQUEST;
    const EXTENSION_JSON_URL = chrome.runtime.getURL('extension.json');
    const REDIRECT = { redirectUrl: EXTENSION_JSON_URL };
    const handleExtensionJson = (_details) => (REDIRECT);
    chrome.webRequest.onBeforeRequest.addListener(handleExtensionJson, filter, spec);
})();

//#endregion

//#region Entry points

(function _handleSubFrameResponseHeaders() {
    const urls = [Patterns.HTTPS, Patterns.WSS];
    const types = [Types.SUB_FRAME];
    const filter = { urls, types };
    const spec = Specs.ON_HEADERS_RECEIVED;
    const replacers = { ...Replacers.COOKIES, ...Replacers.CSP };
    const listener = (details) => {
        return handleResponseHeaders(details, replacers);
    };

    chrome.webRequest.onHeadersReceived.addListener(listener, filter, spec);
})();

// Worker calls are handled here too since they make the frame document call be XHR with all IDs -1
(function _handleXhrResponseHeaders() {
    const urls = [Patterns.HTTPS, Patterns.WSS];
    const types = [Types.XHR];
    const filter = { urls, types };
    const spec = Specs.ON_HEADERS_RECEIVED;
    const replacers = { ...Replacers.COOKIES, ...Replacers.CSP };
    const listener = (details) => {
        // No need for main frame XHR calls (but inner auth calls might try to set cookies)
        if (details.frameId === 0) return handlePassthrough(details);
        return handleResponseHeaders(details, replacers);
    };

    chrome.webRequest.onHeadersReceived.addListener(listener, filter, spec);
})();

//TODO HttpOnly cookies over `http://` in iframes are now not read or set
// Potential solutions (ascending difficulty):
// - Removing HttpOnly and risking JS access
// - We might have a Chrome API to set it ourselves
// - Force `https://` if available
// - Injected code might be like a Chrome API
(function _handleNoSslSubFrameResponseHeaders() {
    const urls = [Patterns.HTTP, Patterns.WS];
    const types = [Types.SUB_FRAME];
    const filter = { urls, types };
    const spec = Specs.ON_HEADERS_RECEIVED;
    const replacers = { ...Replacers.CSP };
    const listener = (details) => {
        return handleResponseHeaders(details, replacers);
    };

    chrome.webRequest.onHeadersReceived.addListener(listener, filter, spec);
})();

(function _handleNoSslXhrResponseHeaders() {
    const urls = [Patterns.HTTP, Patterns.WS];
    const types = [Types.XHR];
    const filter = { urls, types };
    const spec = Specs.ON_HEADERS_RECEIVED;
    const replacers = { ...Replacers.CSP };
    const listener = (details) => {
        // No need for main frame XHR calls (but inner auth calls might try to set cookies)
        if (details.frameId === 0) return handlePassthrough(details);
        return handleResponseHeaders(details, replacers);
    };

    chrome.webRequest.onHeadersReceived.addListener(listener, filter, spec);
})();

//#region

Is there a chance this option to be added by creating yet another chromium-kiosk-extension?

[Salamek]

Hmm i think i rather implement this as http proxy (?using sqid3?) since i think there will be more use cases where we will need to modify request/response and i would like to do it using some universal solution... it needs some testing...

[mishoboss]

Proxy is definitively a better and more flexible solution. Fully support you on that.

[frogmaster]

+1 for proxy support

[Salamek]

Note: This on app init should do the trick according to docs, needs to be tested first

     QNetworkProxy proxy;
     proxy.setType(QNetworkProxy::HttpProxy); //  Socks5Proxy, HttpProxy
     proxy.setHostName("proxy.example.com");
     proxy.setPort(8080);
     proxy.setUser('username');
     proxy.setPassword('password')
     QNetworkProxy::setApplicationProxy(proxy);