iframe twitter mobile website

Question

I really need to iframe twitter.com mobile site into a opera extension wondering if anyone knows what they mean by the following error

sidebar.html:8 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' https://mobile.twitter.com/". Either the 'unsafe-inline' keyword, a hash ('sha256-hM+vuSKyk8KinSQRAwVUgib4/cFYwMvRenQfLzc9VzE='), or a nonce ('nonce-...') is required to enable inline execution.

code sidebar.html

    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://mobile.twitter.com/ 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
    <script type="text/javascript">
    document.domain = 'twitter.com';
    </script>
    <style>
      html,
      body,
      iframe {
        background-color: white;
        border: none;
        height: 100%;
        margin: 0;
        overflow: hidden;
        padding: 0;
        width: 100%;
         z-index: 99999999;
      }
    </style>
  </head>
  <body>
  <iframe frame-src="https://mobile.twitter.com" ></iframe>
    <script src="sidebar.js" defer></script>
    </body>
</html>

background.js

chrome.webRequest.onHeadersReceived.addListener(
  function (details) {
    return {
      responseHeaders: details.responseHeaders.filter(function(header) {
        //return (header.name.toLowerCase() !== 'x-frame-options');
      })
    };
  }, {
    urls: ["http://*.twitter.com","https://mobile.twitter.com/"]
  }, ["blocking", "responseHeaders"]);

sidebar.js

opr.sidebarAction.onFocus.addListener(

)

manifest.json

{
   "background": {
      "scripts": [ "background.js"]
   },
   "description": "TweetTab allows you to quickly and easily access Twitter when you need/want to post.",
   "developer": {
      "name": "russellharrower"
   },
   "icons": {
      "128": "icons/128.png",
      "19": "icons/19.png",
      "38": "icons/38.png",
      "48": "icons/48.png"
   },
    "manifest_version": 2,
   "name": "TwitTab",
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
   "permissions": [ "webRequest", "webRequestBlocking", "https://*.twitter.com/", "*" ],
   "sidebar_action": {
      "default_icon": "icons/38.png",
      "default_panel": "sidebar.html",
      "default_title" : "TweetTab",
        // Required
      "default_panel": "sidebar.html"
    },
   "web_accessible_resources":["sidebar.html"],
   "version": "1.0.1"
}

score 0 · Answer 1 · answered Sep 28 '17 at 03:20

Two potential sources regarding your issue

You have inline Javascript in sidebar.html

Refactor this code into a separate Javascript file or change your Content Security Policy.

<script type="text/javascript">
    document.domain = 'twitter.com';
</script>

Twitter's HTTP response has the x-frame-options header set to SAME ORIGIN. But it seems you've already tried accounting for this.

Take a look at the answer to this question.

iframe twitter mobile website

1 Answers1