Develop Reference

Is there a way in javascript to get all iframes that don't violate same-origin-policy with getElementsByTagName?

I am writing a chrome extension that needs to get an html5 video element on a page, but some video elements were in iframes. I added onto my function to search through iframes, but I started getting errors because of the Same-Origin-Policy related to iframes with different src domains.
In my function, is there an easy way to exclude iframes that violate the Same-Origin-Policy? Or better yet (even though likely not possible), is there a way to still search iframes with different src domains from the main page?
The function in question:
function getVideo() {
var videos = document.getElementsByTagName("video");
if (videos.length >= 1) {
return videos[0];
}
var iframes = document.getElementsByTagName("iframe");
if (iframes.length >= 1) {
for (const frame of iframes) {
videos = frame.contentWindow.document.getElementsByTagName("video");
if (videos.length >= 1) {
return videos[0];
}
}
}
return null; // if a video doesn't exist
}

Edit:
See bottom of answer for current solution.
Original Answer:
Just when you think you have searched long enough on here to warrant a question, you find something that is actually useful.
Based off the answer to this question, I updated my code to this:
function getVideo() {
var videos = document.getElementsByTagName("video");
if (videos.length >= 1) {
return [videos[0], "main"];
}
// Code that will run only inside iframe
if (parent === top) {
var videos = document.getElementsByTagName("video");
if (videos.length >= 1) {
return [videos[0], "iframe"];
}
}
return [null, null]; // if a video doesn't exist
}
And included this in my manifest, so that the script would be injected into the iframes as well:
"content_scripts": [{
"all_frames": true,
...
...
}],
This works, but it does make my other functions pretty ugly. Example:
// if a video exists, set it to the speed and give a notification
function setSpeed(newSpeed) {
var returnVal = getVideo();
var video = returnVal[0], type = returnVal[1];
if (video != null && type === "main") {
video.playbackRate = newSpeed;
inWindowAlert("Speed: " + newSpeed, 1000);
setIcon(newSpeed);
}
if (parent === top) {
if (video != null && type === "iframe") {
video.playbackRate = newSpeed;
inWindowAlert("Speed: " + newSpeed, 1000);
setIcon(newSpeed);
}
}
}
I will try to come up with a cleaner solution, but for now it works. Hope this helps anyone.
New Solution:
Just wanted to update this to say that I completely rewrote the extension's logic to handle this more easily.
The new solution lets each instance of the content script running in each frame run independently and simply collect all videos in its context. I also collect them in a Set to avoid accidental duplication.
I still want to go through again to eliminate the usage of global variables, but the extension works well enough now, so it will likely remain as it is for awhile.
New code:
function getVideos() {
let new_videos = document.getElementsByTagName("video");
if (new_videos.length >= 1) {
VIDEOS = new Set(new_videos);
return VIDEOS;
}
return new Set();
}
and
// set video to the speed and give a notification, restricts available speeds
function setSpeed(newSpeed, video) {
//* BUG-FIX: playback rates below 0.07 rather than 0 were causing errors
newSpeed = newSpeed > 16 ? 16 : newSpeed < 0.07 ? 0 : newSpeed;
// limit decimal values to 2 digits, + in front truncates 2.00 -> 2
SPEED = +newSpeed.toFixed(2);
video.playbackRate = SPEED;
tempAlert("Speed: " + SPEED, 2000, video);
setIcon(SPEED);
}
Where VIDEOS and SPEED are global variables.

Using Driftbot in a single page React App

I am using Driftbot, See Here
and am trying to get it to enable/disable based on the current route/url. I AM USING REACT-ROUTER.
I am able to use drift.unload() to stop it from running (in my componentWillMount() function) but am unable to get it started back up again.
We have some code that was pulled from here on SO that has been working, except we now need to modify it such that it is disabled on specific pages.
Here is the code we are currently using:
let driftbot_function = function() {
!function() {
var t;
if (t = window.driftt = window.drift = window.driftt || [], !t.init) return t.invoked ? void (window.console && console.error && console.error("Drift snippet included twice.")) : (t.invoked = !0,
t.methods = [ "identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on"],
t.factory = function(e) {
return function() {
var n;
return n = Array.prototype.slice.call(arguments), n.unshift(e), t.push(n), t;
};
}, t.methods.forEach(function(e) {
t[e] = t.factory(e);
}), t.load = function(t) {
var e, n, o, i;
e = 3e5, i = Math.ceil(new Date() / e) * e, o = document.createElement("script"),
o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + i + "/" + t + ".js",
n = document.getElementsByTagName("script")[0], n.parentNode.insertBefore(o, n);
});
}();
drift.SNIPPET_VERSION = '0.3.1';
drift.load('****__our-key__****');
drift.page();
}
driftbot_function();
This is currently in the componentDidMount() of our app.js since it is our root '/'. I have also tried moving this over inside a script tag in index.html but had the same results.
When linking to a part of the app I want it disabled, the only method that will disable it is window.drift.unload(). .hide and .off will not work.
When going back to the root, I have the command, window.drift.load(), but now it is an empty function, where before running the unload() function it was working.
I have also tried including the functions found in the Drift Docs linked above in both my root.js and app.js files to no avail
Does anyone have any ideas?

So this was a very confusing ride but I finally figured it out with the help of some of the engineers over at drift.
First of all, in the settings of their dash when you "blacklist" urls you need to only include keywords not full URLs (my first mistake).
Secondly, put the fucntion in a script in the index.html file
Thirdly, find all of the top-level route components where you want the widget to be disabled and include the following code like in their react article
componentWillMount() {
drift.page(this.props.location.pathname)
}
componentWillReceiveProps(nextProps) {
if (nextProps.location.pathname !== this.props.location.pathname) {
drift.page(nextProps.location.pathname)
}
}
This will basically re-initialize the widget and run a .includes check from your provided url (this.props.location.pathname) against the keywords in your settings blacklist. It will then disable it or enable it depending on the results.
There you go, good luck to anyone else stuck on this...

drift.page() was not working for me
i am using the npm package for react
https://github.com/chardmd/react-drift
drift is included in one of my top level components
<Drift appId='123456789' />
<Favicon url={this.favicon} />
<Meta
meta={this.state.data.metaTags}
/>
routes rules are set then set as normal in the drift UI
componentDidUpdate (prevProps, prevState, snapshot) {
const prevLoc = prevProps.location.pathname
const newLoc = this.props.location.pathname
if (prevLoc !== newLoc) {
window.drift.reset()

I can think of two options for your case. First would be to create a component only for starting/stopping driftbot. You would initialise driftbot on componentDidMount then call window.drift.unload() on componentWillUnmount. Then instead of wrapping the whole app with it, you drop it only in the home page, in a way it will be unmounted when you navigate to another section.
The other option, since you mentioned React Router, would be to watch the location of the app, either using history.listen - https://github.com/ReactTraining/history - or checking the props provided by React Router - https://reacttraining.com/react-router/web/api/location - on componentWillUpdate, then turning driftbot on and off based on the current url.

Pingdom test shows wierd js files attached to my website [duplicate]

I'm doing some optimisation on a site Ive recently taken over. I've found a script I don't recognise:
http://static.ak.fbcdn.net/rsrc.php/zo/r/V95Lkt_uLNB.js
It could be a facebook thing, and there's some key logging going on (that Im not too keen on)
It is without a doubt the largest file being requested on a page load (87kb) so if I can do without it, it'll really speed up the page load.
Does anyone know:
A) What it is
B) What it's for
C) What it does
D) Can I do without it

Okay so I had a look over the beautified version of this minified code and have noted the following:
By itself these are a bunch of utility functions.
CavalryLogger doesn't do anything with this file by itself because it doesn't exist, nor is it defined.
The code in question regarding key binding:
function KeyEventController() {
copy_properties(this, {
handlers: {}
});
document.onkeyup = this.onkeyevent.bind(this, 'onkeyup');
document.onkeydown = this.onkeyevent.bind(this, 'onkeydown');
document.onkeypress = this.onkeyevent.bind(this, 'onkeypress');
}
copy_properties(KeyEventController, {
instance: null,
getInstance: function () {
return KeyEventController.instance || (KeyEventController.instance = new KeyEventController());
},
defaultFilter: function (event, a) {
event = $E(event);
return KeyEventController.filterEventTypes(event, a) && KeyEventController.filterEventTargets(event, a) && KeyEventController.filterEventModifiers(event, a);
},
filterEventTypes: function (event, a) {
if (a === 'onkeydown') return true;
return false;
},
filterEventTargets: function (event, b) {
var a = $E(event).getTarget();
if (DOM.isNode(a, ['input', 'select', 'textarea', 'object', 'embed'])) if (a.type != 'checkbox' && a.type != 'radio' && a.type != 'submit') return false;
return a.getAttribute('contentEditable') != 'true';
},
filterEventModifiers: function (event, a) {
if (event.ctrlKey || event.altKey || event.metaKey || event.repeat) return false;
return true;
},
registerKey: function (f, a, d, g) {
if (d === undefined) d = KeyEventController.defaultFilter;
var b = KeyEventController.getInstance();
var c = b.mapKey(f);
if (is_empty(b.handlers)) onleaveRegister(b.resetHandlers.bind(b));
for (var e = 0; e < c.length; e++) {
f = c[e];
if (!b.handlers[f] || g) b.handlers[f] = [];
b.handlers[f].push({
callback: a,
filter: d
});
}
},
keyCodeMap: {
'[': [219],
']': [221],
'`': [192],
LEFT: [KEYS.LEFT, 63234],
RIGHT: [KEYS.RIGHT, 63235],
RETURN: [KEYS.RETURN],
TAB: [KEYS.TAB],
DOWN: [KEYS.DOWN, 63233],
UP: [KEYS.UP, 63232],
ESCAPE: [KEYS.ESC],
BACKSPACE: [KEYS.BACKSPACE],
DELETE: [KEYS.DELETE]
}
});
copy_properties(KeyEventController.prototype, {
mapKey: function (a) {
if (typeof (a) == 'number') return [48 + a, 96 + a];
if (KeyEventController.keyCodeMap[a.toUpperCase()]) return KeyEventController.keyCodeMap[a.toUpperCase()];
var b = a.toUpperCase().charCodeAt(0);
return [b];
},
onkeyevent: function (i, c) {
c = $E(c);
var d = null;
var g = this.handlers[c.keyCode];
var b, f, a;
if (g) for (var h = 0; h < g.length; h++) {
b = g[h].callback;
f = g[h].filter;
try {
if (!f || f(c, i)) {
var node = null;
if (window.Parent && Parent.byTag && c.getTarget) node = Parent.byTag(c.getTarget(), 'a');
user_action(node, 'key', c);
a = b(c, i);
if (a === false) return Event.kill(c);
}
} catch (e) {}
}
return true;
},
resetHandlers: function () {
this.handlers = {};
}
});
This code lets you bind keys to callbacks, and includes more human readable names for common keys. Take for example the usage here:
KeyEventController.registerKey('ESCAPE', Dialog._handleEscapeKey, a);
The ESCAPE key is registered to make Dialogs go away. handlers is also empty by default, so nothing is going to happen until you use registerKey or append to it manually. Note that this is the only instance of registerKey being called.
It also has a lot of AJAX utility functions. Can't really send anything to Facebook from your domain anyways because of same origin policy (unless you modified security permissions, but then that's your fault). Same thing with the cookies set.
There's also a history manger, but it uses an iFrame so it won't be able to read it from your domain anyways.
Finally the like button code I found is an iFrame, so it wouldn't need JS includes unless you were using javascript to create the iFrame or something.
With that in mind I don't see the need for you to include all this.

It looks like this is directly connected to having the "Like this" functionality on a page. The iframe you use to include the 'Like' button seems to come with a couple of 'bonus' scripts.
If you ask me, this is another good reason to NOT have Facebook integrated, it appears to be logging keypresses, and that is not cool.

A quick google search doesn't provide alot of answers - it's some sort of event tracking script for Facebook, and I saw a tweet and a couple of forum posts where people mentioned disabling it and gaining a speed boost - I think you can safely get rid of it, atleast it's worth giving it a try.

This is definitely from Facebook - one of many supporting files for FBML / API / etc.
If you are not using any FB features in your project, simply remove this file.
If you are using any FB features (like 'Like' button), you shouldn't use this file (or any other files with cryptic names) directly either.
You should instead
1) create empty <div id="fb-root"></div> somewhere at the end f your page
2) include http://connect.facebook.net/en_US/all.js script in your page
3) follow further instructions from http://developers.facebook.com/

When the IFRAME is loaded it calls the following URI:
https://www.facebook.com/plugins/like.php?api_key=[your_api_key]&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D27%23cb%3Df39f390d40f7332%26domain%3D[your_TLD]%26origin%3Dhttp%253A%252F%252F[your_TLD]%252Ff72f1f9bea899e%26relation%3Dparent.parent&colorscheme=light&extended_social_context=false&href=[your_share_URI]&layout=button_count&locale=en_US&node_type=link&sdk=joey&send=false&show_faces=false&width=100
Within the script tags of this page are the following calls.
PluginAsyncLoader.load("**https:\/\/fbstatic-a.akamaihd.net\/rsrc.php\/v2\/yq\/r\/CNRdIwfy3yI.js**");
PluginAsyncLoader.ondemandjs = "**https:\/\/fbstatic-a.akamaihd.net\/rsrc.php\/v2\/yH\/r\/muz85bheueJ.js**";

I found "calverly logger" in a file that I did not download but I saw it download right in front of me when I closed Thunderbird (was running Firefox behind it and it showed up there as a file downloading) so went to check what it was.
The file was called: "See All.html" which I found odd and worrying.
the head of the file contains the following code indicating it is a Facebook function...
The Calvery Logger is mentioned near the bottom of the file (not shown here). I have stripped out the html < near the head of the file so that you can see the code... Not sure it will help but look forward to any insights...
// !DOCTYPE html
html lang="en" id="facebook" class="no_js"
head
meta charset="utf-8" />
meta name="referrer" content="origin-when-crossorigin" id="meta_referrer" />
script> window._cstart=+new Date();</script><script>function envFlush(a) {function b(c){for(var d in a)c[d]=a[d];}if(window.requireLazy){window.requireLazy(['Env'],b);}else{window.Env=window.Env||{};b(window.Env);}}envFlush({"ajaxpipe_token":"AXiYOZarFarwOff3","lhsh":"AAQFK_mp-","khsh":"0`sj`e`rm`s-0fdu^gshdoer-0gc^eurf-3gc^eurf;1;enbtldou;fduDmdldourCxO`ld-2YLMIuuqSdptdru;qsnunuxqd;rdoe-0unjdojnx-0unjdojnx0-0gdubi^rdbsduOdv-0`sj`e`r-0q`xm`r-0StoRbs`qhof-0mhoj^q`xm`r","timeslice_heartbeat_config":{"pollIntervalMs":33,"idleGapThresholdMs":60,"ignoredTimesliceNames":{"requestAnimationFrame":true,"Event listenHandler mousemove":true,"Event listenHandler mouseover":true,"Event listenHandler mouseout":true,"Event listenHandler scroll":true},"enableOnRequire":true},"shouldLogCounters":false,"timeslice_categories":{"react_render":true,"reflow":true}}); script> style> style>

It's linked to a virus hacker on Facebook, sending videos to all the friends of the person who's been hacked. If you open such a video, you too become hacked and all your friends get the video too. Do not open any suspect videos or messages, particularly in Messenger.

Javascript error embedding redbubble

Hi I am trying to embed the redbubble code into my site for a client (his red bubble store) into a joomla site and there is something wrong with the script.
<script type="text/javascript" src="http://www.redbubble.com/assets/external_portfolio.js"></script>
<script id="rb-xzfcxvzx" type="text/javascript">new RBExternalPortfolio('www.redbubble.com', 'classiceggshell', 5, 5).renderIframe();</script>
The link it includes returns a 404 error when I check it on the devtools in chrome I tested the script on Jslint it gave me these eight warnings
Expected an identifier and instead saw '<'.
Expected an assignment or function call and instead saw an expression.
Missing semicolon.
Expected an assignment or function call and instead saw an expression.
Missing semicolon.
Missing semicolon.
Unclosed regular expression.
Unrecoverable syntax error. (85% scanned).
So is there something fundamentally wrong with the code would anyone please be able to fix this and give me the correct code to connect to his store. I have tried to load the link to his store into an Iframe but I think redbubble have a block on the iframes as the iframe wont load and has a X-Frame-Options: SAMEORIGIN error.
I have tried speaking to the support for redbubble and they are still yet to get back to me
Please be aware when replying that although I do have some knowledge and can follow step by step instructions I have very little coding knowledge as normally things like this are straightforward.

Alright I had the same issue, for some reason the script isn't there but I was able to find it:
RBExternalPortfolio = function(t, e, n, i) {
var a = this;
a.domain = t, a.rows = n, a.columns = i, a.user_name = e, a.getHeight = function() {
return 222 * a.rows + 85
}, a.getWidth = function() {
return 240 * a.columns + 26
}, a.getSrc = function() {
return "http://" + a.domain + "/people/" + a.user_name + "/external-portfolio?count=" + a.rows * a.columns
}, a.createIframe = function() {
var t = document.createElement("iframe");
return t.src = a.getSrc(), t.width = a.getWidth(), t.height = a.getHeight(), t.frameBorder = 0, t.scrolling = "no", t.setAttribute("allowtransparency", "true"), t
}, a.renderIframe = function() {
var t = document.getElementById("rb-xzfcxvzx");
t.parentNode.replaceChild(a.createIframe(), t)
}
};
From: http://nerdyjs.com/script/1406714
I then saved a copy locally, and changed the getSrc line to hardcode point to my folio, like this:
return "http://redbubble.com/people/<yourname>/external-portfolio?count=" + a.rows * a.columns
It sucks that they haven't fixed it yet but the code at least is out there!

SIMPLE Flash Detection

I know about Adobe's Flash Detection kit - but is there any way to find out simply if Flash is installed/supported by the visitor? If the browser supports Flash, that's great, but I don't care what version. I'm struggling to find a simple bit of JavaScript that would do the trick. Has anyone seen something like this?
Cheers!

http://code.google.com/p/swfobject/

JavaScript Flash Detection Library (Flash Detect)
"A (pure) JavaScript library designed to simplify the process of detecting if
the Adobe Flash Player is installed in a Web Browser."

<script language="JavaScript">
function detectPlugin() {
// allow for multiple checks in a single pass
var daPlugins = detectPlugin.arguments;
// consider pluginFound to be false until proven true
var pluginFound = false;
// if plugins array is there and not fake
if (navigator.plugins && navigator.plugins.length > 0) {
var pluginsArrayLength = navigator.plugins.length;
// for each plugin...
for (pluginsArrayCounter=0; pluginsArrayCounter < pluginsArrayLength; pluginsArrayCounter++ ) {
// loop through all desired names and check each against the current plugin name
var numFound = 0;
for(namesCounter=0; namesCounter < daPlugins.length; namesCounter++) {
// if desired plugin name is found in either plugin name or description
if( (navigator.plugins[pluginsArrayCounter].name.indexOf(daPlugins[namesCounter]) >= 0) ||
(navigator.plugins[pluginsArrayCounter].description.indexOf(daPlugins[namesCounter]) >= 0) ) {
// this name was found
numFound++;
}
}
// now that we have checked all the required names against this one plugin,
// if the number we found matches the total number provided then we were successful
if(numFound == daPlugins.length) {
pluginFound = true;
// if we've found the plugin, we can stop looking through at the rest of the plugins
break;
}
}
}
return pluginFound;
} // detectPlugin
function detectFlash() {
pluginFound = detectPlugin('Shockwave','Flash');
// if not found, try to detect with VisualBasic
if(!pluginFound && detectableWithVB) {
pluginFound = detectActiveXControl('ShockwaveFlash.ShockwaveFlash.1');
}
// check for redirection
if (pluginFound) {
alert ("You has teh flash");
}
}
detectFlash();
</script>
Adapted from:
http://developer.apple.com/internet/webcontent/detectplugins.html