YouTube Player API Accessing and Modifying DOM in iframe - youtube-iframe-api

YouTube player API docs has a section on Accessing and modifying DOM nodes .
Which seems to say that using the method player.getIframe() returns an object with the DOM of the iframe having 'read/write' properties. Which is sort of unusual for an iframe, but google is controlling content and browser, so (I was hoping) that access could be granted while security is assured.
However, using the method player.getIframe() I personally get 4 attributes and NO childnodes(--Nodelist[]--) or children (--HTMLcollection[] -- ) and cannot seem to use js/jQ dom access methods like querySelector().
Disappointingly, this seems to be the experience reported elsewhere on SO .
Is there any way to access the DOM within the YT player API iframe, am I misreading the docs or do the docs need to be updated?!?

Related

Web scraping site using polymerjs / webcomponent

I'm using colly to web scrape youtube charts. This site use polymerjs and as a result, I'm having issues to capture the DOM elements. A simple test I did was document.querySelector("#search-native") on console, and it's returning null.
I saw an element called ytmc-app and I could get this element, but it's not possible to continue querying after that.
Someone has idea how to proceed?

Google Tag Manager (GTM) - "HTML" tag injection by client

We provide an ecommerce checkout on a subsection of our website for example:
example.com/products,
example.com/checkout,
example.com/confirmation
For just those sections of our site we allow our client to add their own Google Tag Manager (GTM) tag. We've blacklisted the "HTML" tag because it allows arbitrary javascript and can be updated at any point.
var dataLayer = [{ 'gtm.blacklist': ['html'] }];
The business/marketing departments want me to allow it now. Is any safe way to allow the "HTML" tag that doesn't involve moving everything to a third party domain?
There is no safe, or for that matter performant, way to use custom HTML tags or custom Javascript variables (the ones with the anonymous functions). Javascript code therein is run through eval, and can do anything that standard Javascript code can do (and given that the code runs in page context, it can basically do anything).
That is after all the reason Google created custom templates with Sandboxed Javascript that runs dangerous functions through secured APIs.
Do not allow this, and if they make you, keep a paper trail. Even if nobody will exploit this maliciously (which remains to be seen), somebody will sooner or later break the page by incompetence, so it is better to be covered.

Adding Custom Popups using google tag manager

When a user lands on a page, I want to show a custom HTML popup. I have Google Tag Manager integrated with the website.
Can this HTML Popup be shown using Google Tag Manager? (script and code to be inserted using Google Tag Manager)
Is it frowned upon / not advised to use google tag manager for
anything apart from tracking?
1.) Yes - GTM is pure Javascript, and inserts Javascript into the page code, so anything you can do you can do via GTM. There are some minor caveats (e.g. a size restriction on custom HTML tags), but doing a popup should work just fine.
2.) There are certain use cases that are discouraged - Google recommends against (or at least used to) making visible changes to the page markup via GTM. The problems with that are that GTM is loaded asynchronously, so you would not know at which point the changes show up and you might get "flickering" pages, and a possible performance impact when you force the page to re-render.
Nothing of this applies to popups, so you should be fine (although using popups these days might have its own problems, but these are not related to GTM).
Personally I would recommend against implementing popups via GTM if the popup is an integral part of your page; splitting up an application between page code and GTM code will sooner or later confuse a developer. But if this is just advertising or a call to action or something similar then (IMO) using GTM is not a problem at all.

getCurrentPosition deprecated [duplicate]

This question already has an answer here:
getCurrentPosition deprecated on Google Apps iFrame?
(1 answer)
Closed 5 years ago.
I've been using Google Maps embedded within a site generated on script.google.com, using the HTML Service as follows:
HtmlService.createTemplateFromFile('index.html');
This has been fantastic, I've produced a web app with an embedded map (see https://script.google.com/macros/s/AKfycbzFiIPsnNgDnz8pmykbyok1xwDdL85EEAwqohoSo9G1QasbWNk/exec).
However, I am now warned that "getCurrentPosition and watchPosition usage in cross-origin iframes is deprecated and will be disabled in M63, around December 2017".
Trouble is, using HtmlService.createTemplateFromFile on script.google.com gives me no option (that I know of) to append allow="geolocation" to the iFrame (the HtmlService generates the iFrame automatically).This will cause the web app to fail in December.
Please advise what I should do to avoid issues!!!
Many thanks,
Sarah.
You may want to check these links: 1 and 2: Deprecating Permissions in Cross-Origin Iframes. In order for a cross-origin frame to use these features, the embedding page must specify a Feature Policy which enables the feature for the frame.
For example, to enable geolocation in an iframe, the embedder could specify the iframe tag as:
<iframe src="https://example.com" allow="geolocation"></iframe>
If you are a developer of a website which uses cross-origin iframes
and you want those iframes to continue to be able to request/use one
of the above features, the page that embeds the iframe will need to be
changed. The simplest way to do that is to modify the tag to
include an allow attribute which specifies the name of the permission.
For example, to enable geolocation and mic/camera for an iframe, the
following would be specified:
<iframe src="https://example.com" allow="geolocation; microphone; camera"></iframe>
Valid values for allow include:
geolocation
microphone
camera
midi
encrypted-media
Note that if the iframe which is using the permission has the same
origin as the top level page, then no changes have to be made.
Hope this helps!

Disable DFP iframes to acces parent window

I am having some troubles with malicious ads that show interstitials with no close button.
Inspecting the code, I found that DFP uses <iframe> tags to load the ads, but as the content of those iframes are loaded using Javascript (using iframe's document.write(), without src attribute), they get full access to parent window through window.top and window.top.document, allowing advertisers to inject code, show malicious ads and even stole data such as user emails and passwords.
In order to prevent this, I'm looking for a way to block DFP ads to access the main window. Is it possible?
Consider using SafeFrames rather than Friendly Iframes you appear to be using. Quoting from DFP's help page on the subject:
We recommend using SafeFrames and creatives compatible with SafeFrame for expansion instead of friendly iframes. SafeFrame is supported in DFP and enabled by default when using GPT tags. It enables transparent and rich interactions between page content and ads, while preventing external access to sensitive data and providing more granular control over which creatives are rendered
I think you use synchronous rendering, try to change it to asynchronous
https://support.google.com/dfp_premium/answer/183282?hl=en

Resources