Как обращаться с политикой безопасности контента (CSP) при добавлении iframe на веб-страницу? - PullRequest
Новая
       46

Как обращаться с политикой безопасности контента (CSP) при добавлении iframe на веб-страницу?

0 голосов
/ 10 января 2019

Я пытаюсь создать расширение для браузера Chrome, которое при каждом нажатии значка расширения Chrome вставляет на текущую страницу iframe, который затем отображает внутри нее угловое приложение, упакованное в само расширение Chrome (т.е. не из внешнего источника). У меня это работает, за исключением того, что я не могу преодолеть нарушения CSP.

manifest.json 

  {
      "manifest_version": 2,
      "name": "My Extension",
      "description": "injects iframe in all pages on command",
      "version": "1.0",
      "permissions": ["storage", "tabs", "debugger", "*://*.google.com/*", "http://*/*", "https://*/*", "notifications"],
      "browser_action": {
        "default_icon": "icon.png",
        "defualt_title": "My Extension"
      },
      "background": {
        "scripts": ["background.js"]
      },
      "content_security_policy": "script-src 'self' https://*.googleapis.com/*; object-src 'self' https://*.googleapis.com/*",
      "web_accessible_resources": [
        "index.html",
        "assets/css/*",
        "assets/js/*",
        "assets/fonts/*"
      ]
    }

background.js 

chrome.browserAction.onClicked.addListener(function(activeTab) {
    chrome.tabs.executeScript(null, {file: "contentScript.js"});
});

contentScript.js 

'use strict';
var iframe = document.createElement('iframe');
iframe.src = chrome.extension.getURL("index.html");
iframe.id = 'myExtension';
document.body.appendChild(iframe);

console.log('content script has executed');

Тогда у вас есть типичный index.html для и ванильное приложение Angular: 

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <!-- <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://*.googleapis.com/* 'unsafe-eval'; object-src 'self' https://*.googleapis.com/*"> -->
  <title>My Extension</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
</head>

<body>
  <div class="container-fluid" style="height: 400px; overflow: hidden;">
    <app-root></app-root>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
</body>

</html>

После сборки и тестирования расширения в браузере я получаю следующие ошибки:

enter image description here

Я исследовал и исследовал, и ни один из ответов, которые я нашел, не кажется применимым для моего конкретного случая использования, или CSP слишком нюансирован, чтобы я мог понять применимость этих решений. Любая помощь в решении этой проблемы будет легендарной!

...