I would like to disbale the X-Frame-Option Header on client side on Firefox(and Chrome).
What I've found:
Overcoming "Display forbidden by X-Frame-Options"
A non-client side solution isn't suitable for my purpose
https://bugzilla.mozilla.org/show_bug.cgi?id=707893
This seems to be pretty close. I tried creating the user.js in the profile dir with the code user_pref("b2g.ignoreXFrameOptions", true);
but it didn't work. The second last entry seems to imply compiling ff with modified code? If this is the case, it's also not a possible solution for me.
I just wrote a little HTML Page with some JS that loops a list of YouTube videos by successively loading them into an iframe. I know youtube supports playlists but they suck and I dont want to download the videos.
Also, it would be nice if the browser only ignores the X-Frame-Option for local files. This would somewhat minimize the security hole I tear open by disabling this. As for Chrome, a solution would be nice but isn't that important.
I guess another approach would be to intercept incoming TCP/IP packets which contain a HTTP Respone and remove this header line but this is quite an overkill.
[edit]
Using youtube.com/embed is a bad workaround since a lot of videos dont allow to be embedded...
This can be easily achieved using an HTTP Observer through a Firefox extension. That observer will look something like this:
let myListener =
{
observe : function (aSubject, aTopic, aData)
{
if (aTopic == "http-on-examine-response")
{
let channel = aSubject.QueryInterface(Ci.nsIHttpChannel);
try
{ // getResponseHeader will throw if the header isn't set
let hasXFO = channel.getResponseHeader('X-Frame-Options');
if (hasXFO)
{
// Header found, disable it
channel.setResponseHeader('X-Frame-Options', '', false);
}
}
catch (e) {}
}
}
}
You can find further info such as how to install the observer on MDN[1][2]
[1] : https://developer.mozilla.org/en/docs/Observer_Notifications#HTTP_requests
[2] : https://developer.mozilla.org/en-US/docs/Setting_HTTP_request_headers#Registering
Using diegocr code, I've created an Firefox add-on to allow the displaying of webpages that have X-Frame-Options in their header, so they will be displayed when accessed via an iframe. It can be downloaded/installed here: https://addons.mozilla.org/en-US/firefox/addon/ignore-x-frame-options/
The Firefox extension mentioned by René Houkema in the other answer no longer works anymore so I created a new one.
https://addons.mozilla.org/fr/firefox/addon/ignore-x-frame-options-header/
This extension is also compatible with Quantum.
Source & updates:
https://github.com/ThomazPom/Moz-Ext-Ignore-X-Frame-Options
Related
I have a legacy add-on for firefox, that opened tabs in responsive view. To achieve this, I used the functions from the responsive design module available in
try { Components.utils.import("resource://devtools/client/responsivedesign/responsivedesign.jsm", respdsgn);
} catch (e) {
try { Components.utils.import("resource:///modules/devtools/responsivedesign.jsm", respdsgn);
} catch (e) {
respdsgn = null;
}
}
From what I understand, this is no longer possible using the new web extensions api. Is there an alternative api available to turn the responsive view on for a specific tab? Or is it still possible to use the old style somehow?
Thanks for any pointers!
The old style (or a variant) cannot be used to open the responsive view. An API to open the reponsive view doesn't exist (yet) in WebExtensions and there is no feature request pending. If you want, you can create one here: http://bugzilla.mozilla.org/
(select WebExtensions - Untriaged as product)
The closest thing to achieve the same result, is implement the responsive design mode yourself. This shouldn't be hard to do, since you just have to change the width and the height of the "html" element.
Content script:
document.getElementsByTagName("html")[0].width = "250px";
Good luck!
I want to prevent JavaScript redirects in Firefox for one domain (youtube.com), and I was wondering whether there's a plugin that will do it. I'm trying to use NoScript, and I'd like to allow scripts globally because I don't want to disable most JavaScript, but this seems to just allow JavaScript redirects. Is there a way for me to just disable JavaScript redirects (or ideally, display a prompt)?
The only other way I can think of doing it is to write my own extension that messes around with window.onbeforeunload and window.unload, but ideally I'd like to use an existing addon.
var {utils: Cu, classes: Cc, instances: Ci, results: Cr} = Components
Cu.import('resource://gre/modules/Services.jsm');
var myobserve = function(aSubject, aTopic, aData) {
var httpChannel = aSubject.QueryInterface(Ci.nsIHttpChannel);
if (httpChannel.loadFlags & Ci.nsIHttpChannel.LOAD_REPLACE) {
//its a redirect, lets block it
httpChannel.cancel(Cr.NS_BINDING_ABORTED);
}
}
I use the presence of flags to test for redirect. Here are some notes i took on flags awhile back, im not totally sure of how accurate these notes are:
if has LOAD_DOCUMENT_URI it usually also has LOAD_INITIAL_DOCUMENT_URI if its top window, but on view source we just see LOAD_DOCUMENT_URI. If frame we just see LOAD_DOCUMENT_URI. js css files etc (i think just some imgs fire http modify, not sure, maybe all but not if cached) come in with LOAD_CLASSIFY_URI or no flags (0)
note however, that if there is a redirect, you will get the LOAD_DOC_URI and the LOAD_INIT_DOC_URI on initial and then on consequent redirects until final redirect. All redirects have LOAD_REPLACE flag tho
note: i think all imgs throw http-on-modify but cahced images dont. images can also have LOAD_REPLACE flag
Of course to start observing:
Services.obs.addObserver(myobserve, 'http-on-modify-request', false);
and to stop:
Services.obs.removeObserver(myobserve, 'http-on-modify-request', false);
I'm going to build my application based on ajax, and my URLs are something like:
http://server.com/module/#function_name,param1,param2...etc
After referencing some discussions about google's suggestion: hashbang (#!), it's not hard for me to realize that it was not the best solution. There are several reasons:
The URL is pretty ugly, anyway.
It's terrible if someday Google(or some other search-engines) suggest a better solution other than hashbang. I must keep my ugly url with hashbang, or write some js-code to make link to my page still alive.
HTML5 pushState will be popular someday.
For all things above, I decide to make it my way: my navigation links will be like this:
<a href="http://server.com/module/for-crawler/function-name/param1/param2/...">
Some text </a>
And some jQuery code will make it capable to load ajax content instead of page-change like a normal link:
$(function(){
$('a').live('click',function(e){
var realURL = translateURL( $(this).attr('href') )
loadContent( realURL );
e.prevetnDefault();
return false;
})
})
/* -- the function translateURL will turn url like :
..... http://server.com/module/for-crawler/function-name/param1/param2/...
Into:
..... http://server.com/module/#function-name/param1/param2/...
That's the real url I think all ajaxers are used to dealing with
*/
When crawler reads my page, it will follow the url in "href" attribute, and I will provide it with static non-js version of my page just for google to read. After some days, my page is indexed & user will see my page on Google's results like this:
http://server.com/module/for-crawler/function-name/param1/param2/...
I'm going to user js again to redirect user to my normal ajax version, I mean, to the real URL :
http://server.com/module/#function-name/param1/param2/...
That's the best approach I can think about at this time. Please give me advices : should I do it that way, or can I make it better ? Thanks all guys !
Depending on your audience I would suggest to use HTML5 PushState anyway.
If the client is not supporting HTML5 PushState let him simply use the same version of your app as the crawlers do. In my opinion a page reload is not as bad as a hashed URL. Since users share URLs your hashed URL gets exposed to other users. This URL wouldn't work for, let's say Facebooks Link sharing previews or any other client that doesn't support JavaScript.
Instead I would only use the crawler-friendly app in combination with HTML5 PushState. With PushState you will always expose a single URL, independent of the JavaScript support of your client.
First, detect whether PushState is supported:
function supports_history_api() {
return !!(window.history && history.pushState);
}
Then your click-handler would look something like this:
$('a').live('click',function(e){
var url = $(this).attr('href');
e.preventDefault();
loadContent( url );
history.pushState({"url":url}, $(this).attr('title'), url);
return false;
})
This is a very similar question to AJAX, Subdomains and the 200 OK response (and JavaScript Same Origin Policy - How does it apply to different subdomains?), but with a twist. I have a situation in which:
A domain (www.example.com)
Where the page at a subdomain (sd.example.com/cat/id)
Needs to make ajax-style requests to another subdomain (cdn.example.com)
In contrast to the aforementioned question, what I am requesting is images.
GET requests of images (using jQuery $.load())
This seems to be working just fine. Because it was working just fine, when someone pointed out it was generating errors in Firebug the same-origin policy didn't immediately occur to me.
Images ARE loading at localhost (apache VirtualHost url of test.sd.example.com/cat/id)
However, now that it has come to mind thanks to that question I linked, I am concerned that this will not work reliably in production.
Will this continue to work in a production environment -- and will it work reliably cross-browser?
Answer: No -- it only looked like it was working; it wasn't really
If not, how do I fix it? (I don't think I can JSONP images...can I?)
Answer: Continue setting src of image & wait to show until load event triggered.
If so, how do I stop the Firebug errors? If I can. (They're scaring fellow devs.)
Answer: Same as above -- get rid of step where actually doing GET request for image file.
Initial Code
function(imageUrl, placeTarget){
var i = new Image();
var img = $(i);
img.hide()
.load(imageUrl, function(e){
// console.log("loadImage: loaded");
placeTarget.attr("src", imageUrl);
return true;
})
.error(function(){
// error handling - do this part
// console.log("loadImage: error");
return false;
});
return;
} // loadImage
Why not insert the images into the page by creating image elements and setting the src. what could be simpler?
edit: ... via javascript
I'm not sure this is exactly right, but in jquery:
img = $('<img>');
img.attr('src', 'http://somewhere.com/some_image.jpg');
$('#place_to_add').append(img);
img.ready(fade_into_next);
Checkt this post: JavaScript Same Origin Policy - How does it apply to different subdomains?
I have a Safari 5 extension that contains a toolbar. Whenever the current tab changes, that toolbar should be updated. I would like to do something like this from my bar's script:
safari.self.browserWindow.addEventListener("activeTab", tabChanged, false);
However, that doesn't seem to work. I have tried a number of other event names as well:
activeTab
activeTabChanged
onActiveTab
onActiveTabChanged
tab
tabChanged
onTab
onTabChanged
selectionChanged
onSelectionChanged
Does anybody know how to detect when the active tab changes?
Not that this is in any way related, but it looks like I would do this in Chrome with:
chrome.tabs.onSelectionChanged.addListener(tabChanged);
Safari 5.1 has several new events for extensions, including an "activate" event that fires when a window or tab is focused.
https://developer.apple.com/documentation/safariextensions/safariactivateevent
That's the event you are looking for. I'm not sure, but i think is a new addition to the extensions api. You can put in global.html or in the popover.html
safari.application.addEventListener("activate", activateHandler, true);
function activateHandler(event) {
safari.application.activeBrowserWindow.activeTab.page.dispatchMessage('someId', false);
}
I agree with #imiaou 's answer: from looking at Apple's docs there doesn't seem to be a way to do this :(.
Since I needed to detect tab changes for my extension (which I'm porting over from Chrome), I did the following polling-based workaround which seems to be working fine (in my global page):
var prevActiveTab;
setInterval("poorMansOnTabChange()", 1500); //poll every 1.5 sec
function poorMansOnTabChange() {
var curTab = safari.application.activeBrowserWindow.activeTab;
if (curTab != prevActiveTab) {
prevActiveTab= curTab;
console.log("active tab changed!");
//do work here
}
}
I'm unhappy with constantly polling the browser, but I see no other way around this until Apple adds support for these tab-events. If your extension can live with a relatively relaxed tab-switch event trigger latency then this could be a reasonable workaround for now (1.5 sec. max latency is acceptable for my extension, and it doesn't feel like its slowing down the browser).
While Safari doesn't have Chrome's specific tab-related API, it does have a perfect solution to this problem.
#Galt was 99% of the way there, with the idea to add an event listener to your injected JavaScript and to dispatchMessage that information to your extension.
The event handler you're looking for is named focus, and gets fired every time a tab or window gets selected.
In your injected code:
var tabInFocus = function( event )
{
safari.self.tab.dispatchMessage("tabFocusSwitched","");
}
window.addEventListener("focus", tabInFocus, false);
You can then update your extension's UI, with the data relevant to safari.application.activeBrowserWindow.activeTab
I found this method works better than focus event, it can be managed in the background page:
safari.application.addEventListener("validate", PopUp.validateCommand, false);
var PopUp = {
activeTab : null,
// commands are validated before being excecuted
validateCommand : function(aEvent) {
// this is a hack for detecting tab switches, safari does not have a dedicated API like Chrome
if(PopUp.activeTab !== null){
if(PopUp.activeTab !== safari.application.activeBrowserWindow.activeTab){
$.each(safari.application.browserWindows, function(aIndex, aWindow) {
$.each(aWindow.tabs, function(aIndex, aTab) {
// message all tabs about the focus switch event
if (aTab !== safari.application.activeBrowserWindow.activeTab && aTab.page) {
aTab.page.dispatchMessage("tabUnfocused");
}else{
aTab.page.dispatchMessage("tabFocused");
}
});
});
}
}
// set the new active tab
PopUp.activeTab = safari.application.activeBrowserWindow.activeTab;
}
}
This code will help to trace the change in URL :-
Write this code Inject.js , in side function
function trackURL() {
alert("beforeNavigate "+safari.application.activeBrowserWindow.activeTab.url);
setTimeout(function() {
alert("afterNavigate "+safari.application.activeBrowserWindow.activeTab.url);
}, 500);
}
safari.application.addEventListener("beforeNavigate", trackURL, true);
It seems Apple doesn't provide much API for us manipulating tabs like Chrome does.
Currently, there is no way to detect tab event.
Unlike chrome which provides a special API for events like window and tab changes, you can still do it with safari extensions.
You simply have to have your injected javascript set up event listeners for the events that you want.
Then if that info is needed by global or other parts of the extension, you can pass the info in messages using the postMessage command.
injected.js:
window.addEventListener("load", loaded, false);
safari.self.tab.dispatchMessage("somethinghappened","load");