google-chrome-extension - extension - content-security-policy wordpress

Inyectar iframe en la página con una política de seguridad de contenido restrictiva

Question

Quiero crear una extensión de navegador que cree una barra lateral. Chrome no tiene una barra lateral de primera clase, por lo que debemos colocar un iframe en la página. Sin embargo, esto se rompe en muchas páginas debido a la política de seguridad del contenido. Por ejemplo, GitHub usa un CSP, que no permite incrustaciones de marcos flotantes en otros sitios. Por ejemplo, si tratas de poner el sitio web de capitalone.com en un iframe en GitHub obtienes lo siguiente:

Se negó a enmarcar '' https://www.capitalone.com/ '' porque infringe la siguiente directiva de Política de seguridad de contenido: "frame-src ''self'' render.githubusercontent.com www.youtube.com assets.braintreegateway.com".

Aquí hay una extensión de navegador simple para reproducir eso:

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
  if (changeInfo.status === ''complete'') {
   chrome.tabs.executeScript(tabId, { code: ''document.body.innerHTML=/'<iframe style=/"width:600px; height:600px/" src=/"https://www.capitalone.com//"></iframe>/' + document.body.innerHTML;'' }, function() {
     console.log(''Iframe injection complete'');
   })
  }
}.bind(this));

Sin embargo, según Wikipedia, una extensión de navegador debería poder insertar un iframe a pesar de cualquier política de seguridad de contenido:

De acuerdo con el Modelo de Procesamiento de CSP, [20] CSP no debe interferir con la operación de los complementos o extensiones del navegador instalados por el usuario. Esta característica de CSP permite de manera efectiva cualquier complemento o extensión para inyectar secuencias de comandos en sitios web, independientemente del origen de esa secuencia de comandos, y así estar exentos de las políticas de CSP.

¿Hay alguna otra forma en que debería inyectar un iframe además de lo que estoy haciendo?

Answer 1

La incapacidad de insertar un iframe externo en Chrome es un error ( crbug.com/408932 ).

Si desea incrustar un marco externo en un sitio web externo, entonces debe cargarse en un marco que se empaqueta con su extensión.

manifest.json

{
    "name": "Embed external site",
    "version": "1",
    "manifest_version": 2,
    "content_scripts": [{
        "js": ["contentscript.js"],
        "matches": ["*://*/*"],
        "all_frames": true
    }],
    "web_accessible_resources": [
        "frame.html"
    ]
}

NO use chrome.tabs.onUpdated + chrome.tabs.executeScript si desea que siempre se inserte un script de contenido en un documento. Su implementación es defectuosa y puede hacer que el script se ejecute varias veces. En su lugar, debe declarar el script de contenido en el archivo de manifiesto .

(elimine "all_frames": true si no desea insertar el marco en cada subcuadro).

contentscript.js

// Avoid recursive frame insertion...
var extensionOrigin = ''chrome-extension://'' + chrome.runtime.id;
if (!location.ancestorOrigins.contains(extensionOrigin)) {
    var iframe = document.createElement(''iframe'');
    // Must be declared at web_accessible_resources in manifest.json
    iframe.src = chrome.runtime.getURL(''frame.html'');

    // Some styles for a fancy sidebar
    iframe.style.cssText = ''position:fixed;top:0;left:0;display:block;'' +
                           ''width:300px;height:100%;z-index:1000;'';
    document.body.appendChild(iframe);
}

frame.html

<style>
html, body, iframe, h2 {
    margin: 0;
    border: 0;
    padding: 0;
    display: block;
    width: 100vw;
    height: 100vh;
    background: white;
    color: black;
}
h2 {
    height: 50px;
    font-size: 20px;
}
iframe {
    height: calc(100vh - 50px);
}
</style>
<h2>Displaying https://robwu.nl in a frame</h2>
<iframe src="https://robwu.nl/"></iframe>

Es importante observar que cargué un sitio https en el marco. Si intenta cargar un sitio HTTP en el marco, la política de contenido mixto impedirá que el marco se cargue si uno de los marcos principales es una página https.

Reemplace https://robwu.nl/ con http://example.com/ y el marco permanecerá en blanco en páginas https como https://github.com . Al mismo tiempo, se imprimirá el siguiente mensaje en la consola.

[blocked] The page at ''https://github.com/'' was loaded over HTTPS, but ran insecure content from ''http://example.com/'': this content should also be loaded over HTTPS

Answer 2

La respuesta de Rob W es correcta. Puedes seguir esta https://transitory.technology/browser-extensions-and-csp-headers/ . Lo he logrado hacer funcionar con éxito en mi extensión de Chrome https://github.com/onmyway133/github-chat

Tenga en cuenta que utilizo Chrome 59, así que puedo usar la mayoría de las funciones de ES6

Declarar en manifiesto

"web_accessible_resources": [
  "iframe.html",
  "scripts/iframe.js"
]

Crear un iframe en el evento window.onload

let url    = decodeURIComponent(window.location.search.replace(''?url='', ''''))
let iframe = document.createElement(''iframe'')
iframe.src = url

iframe.id = ''github-chat-box-iframe-inner''
iframe.style.width = ''100%''
iframe.style.height = ''350px''
iframe.style.border = ''0px''

window.onload = () => {
  document.body.appendChild(iframe)
}

Answer 3

Su ejemplo debería funcionar en Chrome, pero actualmente no funciona debido a un error: crbug.com/408932 . La respuesta de Rob W contiene una buena solución para el problema.