Here I need to implant an iframe in my site, and I want to inject some script or css to change the iframe, because of the iframe is not same-origin with my site, so I set a proxy makes it same-origin(localhost:4000).
When I try to get the element from the iframe, an error occured in the console which doesn't meet my expectation.
My site was hosted on localhost:4000 too.
Any idea about this?
Error details>>
<iframe name="editorFrame" id="editorId" src="http://localhost:4000/iframe"></iframe>
// error was raised on
let iframeHead = iframeWin.document.querySelector("head") as HTMLElement;
// the server listens on localhost:4000
// the proxy code
app.use(path, function(req, res) {
return proxy({
target: "http://47.75.177.99",
pathRewrite: {
"^/iframe": "/",
},
onProxyReq(proxyReq, req, res) {
proxyReq.setHeader(
"Cookie",
"tableau_locale=zh; workgroup_session_id=W2fKwkFeSzeC76d0hAAPmA|9vpJTvdHXW9VhaRrMLtwDzIazGYSgCIq; XSRF-TOKEN=NeRc6YfknJ5Vgj03xFwTQ30mftd1Jqlt"
);
},
changeOrigin: true
})(...arguments);
});
Related
Using SvelteKit 1.0.0-next.95 to get a JSON array back from an external API endpoint and display in a template like this:
<script context="module">
export async function load({ fetch }) {
const url = 'https://www.schoolhouseyoga.com/api/announcement'
const res = await fetch(url, {
method: 'GET',
mode: 'cors',
headers: {
'content-type': 'application/json'
}
})
if (res.ok) {
return {
props: {
sections: await res.json()
}
}
}
return {
status: res.status,
error: new Error(`Could not load ${url}`)
}
}
</script>
<script>
export let sections = []
</script>
<template>
<section>
{#if sections.length > 0}
<div class="callout">
<h1>Announcements</h1>
{#each sections as section}
<div>
{#if section.announcements.length > 0}
<h2>{section.section}</h2>
{/if}
{#each section.announcements as announcement}
<p><b>{announcement.title} </b>- {#html announcement.description}</p>
{/each}
</div>
{/each}
</div>
{/if}
</section>
</template>
If you try https://www.schoolhouseyoga.com/api/announcement (CORS) in a browser or using curl, you'll get a JSON array with two elements.
When I run this in dev mode, npm run dev -- --open and navigate to this route on Safari 14.1 (macOS), I get a 500 error and the message, "Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin." If I try to navigate to that route on Google Chrome, I get a 500 error and "TypeError: Failed to fetch".
But with either browser, if I refresh the page, the data loads successfully. Navigating to a different route then back again, the error reappears.
I am guessing this has to do with SSR but not sure what to do about it.
Any thoughts?
The problem was related to server-side rendering and a CORS issue with the endpoint. When the server-side code performed the fetch, it worked fine. Subsequent fetches were being performed by the client (which ran into the CORS issue).
While the endpoint appeared to have CORS enabled...
import { Router } from 'express';
import cors from 'cors';
import * as controller from './announcement.controller';
const router = Router();
router.get('/', cors(), controller.index);
But the endpoint was also using helmet and needed
app.use(helmet.permittedCrossDomainPolicies());
prior to loading the routes.
Hope this helps others.
Context
I'm building a chrome extension that allows users to run automated scripts on 3rd party sites from anywhere on the web. The extension needs the ability to dynamically insert an iframe on any page that the user in on where that iframe is loading a 3rd party site.
The Problem
When I try to load linkedin.com in an iframe from google.com I get the linkedin.com refused to connect. If I look I can see that the x-frame options are still present in the headers while I have confirmed that I've stripped them out in them out.
I've added the following to my extension background script to allow iframes to load in any site
chrome.webRequest.onHeadersReceived.addListener(function (details) {
const headers = details.responseHeaders.filter(header => {
let headerName = header.name.toLowerCase();
return !(headerName === 'content-security-policy' || headerName === 'x-frame-options');
})
if (details.url.includes('linkedin.com')) {
// this console log shows that I've stripped out the necessary headers correctly
console.debug('REMOVED HEADERS: ', headers);
}
return {
responseHeaders: headers
};
}, {
urls: ['<all_urls>']
}, ['blocking', 'responseHeaders']);
I'm using the following code in the console on google.com to insert an iframe loading linkedin.com
(function () {
var iframe = document.createElement('iframe');
iframe.style.position = 'absolute';
iframe.style.zIndex = 100000;
iframe.style.top = 0;
iframe.style.left = 0;
iframe.height = 600;
iframe.width = 900;
iframe.referrerPolicy = 'no-referrer-when-downgrade';
iframe.src = 'https://www.linkedin.com';
document.body.appendChild(iframe);
})();
Here you can see the console log showing the modified headers with x-frame and CSP removed from the iframe request headers
but then the iframe doesn't load. it returns 200 but nothing happens
This actually was working and the Brave shield was preventing the iframe from loading in the page.
I'm creating extension to organize youtube channels using tags. It has angular frontend with url like this
moz-extension://f78b3bd9-a210-41c5-9d8d-9b7ab3717f6e/index.html#/channel/UCtinbF-Q-fVthA0qrFQTgXQ
And I want to embed channel's page using iframe, but security policies doesn't allow me to do that.
Load denied by X-Frame-Options: https://www.youtube.com/ does not permit cross-origin framing.
So I tried to modify X-Frame-Options, but it doesn't change anything(headers aren't added).
What I did:
1 Added permissions to manifest.json:
"webRequest",
"://.youtube.com/",
"://www.youtube.com/*"
2 Wrote some code in background.js
function addFramePermissions(e) {
console.log("Loading url: " + e.url);
var allowedHeaders = [];
for (var header of e.responseHeaders) {
if (header.name.toLowerCase() !== "x-frame-options") {
allowedHeaders.push(header);
} else {
console.log('x-frame-options found!!!');
}
}
e.responseHeaders = allowedHeaders;
return { responseHeaders: e.responseHeaders };
}
browser.webRequest.onHeadersReceived.addListener(
addFramePermissions,
{
urls: [
"*://*.youtube.com/*",
"*://youtube.com/*"
]
},
["blocking", "responseHeaders"]
);
Code reaches function and I can see "x-frame-options found!!!" in console, but firefox's Network Monitor shows that x-frame-options exists with value SAMEORIGIN
I ran my extension in Chrome and Chrome said that I forgot to add "webRequestBlocking" in permissions. Thanks, Chrome!
I want to dynamicaly inject and load an iframe inside the background page. But every time, the request is canceled.
http://i.imgur.com/Puto33c.png
That used to work a week ago. I don't know where I'm wrong.
To reproduce this issue, I created a small extension :
manifest.js :
{
"name": "iframe background",
"version": "1.0.0",
"manifest_version": 2,
"browser_action": {
"default_title": "iframe"
},
"background": {
"persistent": false,
"scripts": ["background.js"]
}
}
background.js :
chrome.browserAction.onClicked.addListener(function() {
var iframe = document.createElement('iframe');
iframe.src = 'http://localhost:3000/';
iframe.onload = function() {
console.log(iframe.contentDocument); // return null
};
document.body.appendChild(iframe);
});
The page to load is not blocked by X-Frame-Options SAMEORIGIN.
I tried to put the iframe directly within a HTML background page with no luck.
I also tried to add an content_security_policy :
"content_security_policy": "script-src 'self'; object-src 'self'; frame-src 'self' http://localhost:3000/"
But the iframe still doesn't load.
Does someone has a workaround or a solution to this problem?
Thanks !
Chrome 58.0.3014.0 enables Site Isolation for extensions by default that makes the iframe load in a different renderer process handled by a separate chrome.exe OS process.
The 'canceled' message means that the extension's chrome.exe process canceled the request and it was handled by a different hidden chrome.exe process.
The correct approach is to declare a content script that will automatically run on the iframe URL and communicate to the background page. Note: only JSON-fiable data may be passed, in other words, you can pass innerHTML but not DOM elements. This is easy to handle though via DOMParser.
manifest.json additions:
"content_scripts": [{
"matches": ["http://localhost:3000/*"],
"js": ["iframe.js"],
"run_at": "document_end",
"all_frames": true
}],
iframe.js:
var port = chrome.runtime.connect();
// send something immediately
port.postMessage({html: document.documentElement.innerHTML});
// process any further messages from the background page
port.onMessage.addListener(msg => {
..............
// reply
port.postMessage(anyJSONfiableObject); // not DOM elements!
});
background.js:
var iframePort;
chrome.browserAction.onClicked.addListener(() => {
document.body.insertAdjacentHTML('beforeend',
'<iframe src="http://localhost:3000/"></iframe>');
});
chrome.runtime.onConnect.addListener(port => {
// save in a global variable to access it later from other functions
iframePort = port;
port.onMessage.addListener(msg => {
if (msg.html) {
const doc = new DOMParser().parseFromString(msg.html, 'text/html');
console.log(doc);
alert('Received HTML from the iframe, see the console');
}
});
});
See also a similar QA: content.js in iframe from chrome-extension popup
I have run into an issue recently where we have been told to remove the hash symbols from our Backbone applications. This presents two problems: (a) the ASP.NET routes need to handle any remotely linked URL (currently this is no problem with the hash symbols) so that we're not hitting a 404 error and (b) the proper route needs to be preserved and passed on to the client side (Backbone) application. We're currently using ASP.NET MVC5 and Web API 2 for our backend.
The setup
For an example (and test project), I've created a test project with Backbone - a simple C# ASP.NET MVC5 Web Application. It is pretty simple (here is a copy of the index.cshtml file, please ignore what is commented out as they'll be explained next):
<script type="text/javascript">
$(document).ready(function(event) {
Backbone.history.start({
//pushState: true,
//root: "/Home/Index/"
});
var Route = Backbone.Router.extend({
routes: {
"test/:id": function (event) {
$(".row").html("Hello, " + event);
},
"help": function () {
alert("help!");
}
}
});
var appRouter = new Route();
//appRouter.navigate("/test/sometext", { trigger: true });
//appRouter.navigate("/help", { trigger: true });
});
</script>
<div class="jumbotron">
<h3>Backbone PushState Test</h3>
</div>
<div class="row"></div>
Now, without pushState enabled I have no issue remote linking to this route, ie http://localhost/Home/Index#test/sometext
The result of which is that the div with a class of .row is now "Hello, sometext".
The problem
Enabling pushState will allow us to replace that pesky # in the URL with a /, ie: http://localhost/Home/Index/test/sometext. We can use the Backbone method of router.navigate("url", true); (as well as other methods) to use adjust the URL manually. However, this does not solve the problem of remote linking. So, when trying to access http://localhost/Home/Index/test/sample you just end up with the typical 404.0 error served by IIS. so, I assume that it is handled in in the RouteConfig.cs file - inside, I add a "CatchAll" route:
routes.MapRoute(
name: "CatchAll",
url: "{*clientRoute}",
defaults: new { controller = "Home", action = "Index" }
);
I also uncomment out the pushState and root attributes in the Backbone.history.start(); method:
Backbone.history.start({
pushState: true,
root: "/Home/Index/"
});
var Route = Backbone.Router.extend({
routes: {
"test/:id": function (event) {
$(".row").html("Hello, " + event);
},
"help": function () {
alert("help!");
}
}
});
var appRouter = new Route();
//appRouter.navigate("/test/sometext", { trigger: true });
//appRouter.navigate("/help", { trigger: true });
This allows me to at least let get past the 404.0 page when linking to these routes - which is good. However, none of the routes actually "trigger" when I head to them. After attempting to debug them in Chrome, Firefox, and IE11 I notice that none of the events fire. However, if I manually navigate to them using appRouter.navigate("/help", { trigger: true }); the routes are caught and events fired.
I'm at a loss at this point as to where I should start troubleshooting next. I've placed my Javascript inside of the $(document).ready() event as well as the window.onload event also (as well as not inside of an event); none of these correct the issue. Can anyone offer advice on where to look next?
You simply have to move Backbone.history.start after the "new Route" line.
var Route = Backbone.Router.extend({
routes: {
"test/:id": function (event) {
$(".row").html("Hello, " + event);
},
"help": function () {
alert("help!");
}
}
});
var appRouter = new Route();
Backbone.history.start({
pushState: true,
root: "/Home/Index/"
});
Make sure you go to ".../Home/Index/help". If it doesn't work, try temporarily removing the root and go to ".../help" to see if the root is the problem.
If you still have troubles, set a js breakpoint in Backbone.History.loadUrl on the "return" line. It is called from the final line of History.start to execute the current browser url on page load. "this.matchRoot()" must pass then, "fragment" is matched against each "route" or regexp string in "this.handlers". You can see why or why not the browser url matches the route regexps.
To set to the js breakpoint, press F12 in the browser to open the dev console, press Ctrl-O or Ctrl-P to open a js file, then type the name of the backbone js file. Then search for "loadUrl:". You can also search for "Router =" to find the start of the router class definition (same as for "View =" and "Model =" to find the backbone view/model implementation code). I find it quite useful to look at the backbone code when I have a question like this. It is surprisingly readable and what better place to get answers?
If your js files happen to be minified/compressed, preferably turn this off. Alternately you can try the browser unminify option. In Chrome this is the "{}" button or "pretty print". Then the js code is not all on 1 line and you can set breakpoints. But the function and variable names may still be mangled.
I have solved my own problem using what feels to be "hackish", via the following. If anyone can submit a better response it would be appreciated!
My Solution:
I globally override the default Backbone.Router.intilaize method (it is empty) with the following:
$(document).ready(function (event) {
var _root = "/Home/Index/";
_.extend(Backbone.Router.prototype, {
initialize: function () {
/* check for route & navigate to it */
var pathName = window.location.pathname;
var route = pathName.split(_root)[1];
if (route != undefined && route != "") {
route = "/" + route;
this.navigate("", { trigger: false });
this.navigate(route, { trigger: true });
}
}
});
});