Prevent javascript access to DOM elements of widget - javascript

If I develop a Javascript widget that others can embed directly into their page without using an iFrame, is it somehow possible to prevent Javascript access to DOM-elements of the widget from the embedding page?
Suppose the widget is an image gallery and the embedding website selects all images via Javascript and changes both CSS attributes and any click handlers. How can I prevent the functionality or appearance of the widget from being changed without using an iFrame? I imagine this as a kind of firewall that allows/blocks Javascript access by DOM-source and destination.

The perfect solution is Shadow Dom

Related

Chat widget with react.js

I am writing a chat widget, that would be distributed to the end users with little code to put in their website. Usual routine.
My widget is going to be written in React. I know several ways to achieve this. Let me list the ways that I could think of.
Give a code snippet with directly iframe and source url in it. Problem with this approach is, it can be used only if the widget is embed. If the widget needs to be popup, flexibility will be lost.
Give a code snippet with a javascript being loaded asynchronously. Javascript will create an iframe in the parent webpage and src can be set. This widget javascript can have little intelligence. This is the usual approach followed by most of the widget developers.
Of course, source URL will render a React page which is bundled by webpack, in either case.
I wanted to know the best practices of developing a widget. So I went through the popular implementations of it. I liked Intercom's widget very much. It is written in React. I analyzed how it works.
The minimal javascript is loaded async on the webpage. It is injecting an iframe with id intercom-frame. That iframe has a script in it's head with a source URl. Obviously it is React bundle.
The thing that I don't understand is, below this iframe, a div is created with three iframes in it. One to show the chat bubble, another to show the chat bubble icon, the last one to show the actual chat window. Those iframe doesn't have source url and I guess the bundle is served from the first iframe created by the widget javascript.
I came across this SO question, which partially answers my question. From the answer,
expose some API between your customer webpage and your iframe, using window messaging.
the main code (the iframe code) is then loaded by this first script
asynchronously, and not included in it.
What I don't understand is,
1.) How they would have achieved it with window messaging?
2.) How they would have managed to create a div with iframes in it, from another iframes script?. Widget javascript is not creating those elements, based on it's source. It should have been done by the React bundle in the iframe generated by widget js.
3.) How a react bundle inside an iframe can create react elements in the parent DOM?
None of the iframe created by Intercom's script has src attribute, that means they are not subject to the same origin policy. Therefore, they can modify parent page html and vice versa.
However, I don't understand why they need to have separate iframe. And why using a script to inject another script which inject the main html content. Doesn't the first script have enough ability to inject html content? I'd love to be lightened about these things.

Can I insert HTML into a page via a file, and then interact with those DOM elements with JavaScript?

I'm building a Chrome Extension.
The extension injects some CSS and JavaScript when .html files on the users local drive are loaded in the browser (file:///).
My extension adds an extensive UI to the page that allows the user to modify and manipulate the original source code from their .html file.
The primary purpose of the extension is debugging and QAing HTML email newsletters. Here's just a few things that it does:
Checking links for the appropriate parameters.
Toggling images off and on to simulate popular email clients.
Displaying the source code side-by-side to show a desktop view and multiple mobile sized views.
A function that takes the original HTML and generates a plain text version.
A function that toggles <style> blocks off and on to simulate popular email clients ignoring them.
Email files are backed up via Dropbox and the Dropbox API is integrated to allow for quick sharing right from the email newsletter.
Until now I've been using javascript in my injected content script like this to create all of my menu items.
var debugOrb = document.createElement("div");
debugOrb.id = "borders-orb";
debugOrb.className = "borders-orb orb glyph";
debugOrb.addEventListener("click", toggleBorders, false);
orbsBottom.appendChild(debugOrb);
Here's an extended view of the code I've written to create all of these toggles/menu items: http://pastebin.com/LQTkNhpP
My problem is that now I'm going to be adding a LOT more clickable menu items like this. And it feels like if I do, it's going to get out of hand really quick. Especially since I'll be nesting a lot of divs to make the whole thing look organized and using JavaScript to create lots of text nodes too.
My first thought was what if I could just create my entire menu in regular HTML, then just inject that file into the page with the javascript in my content script. I'm barely intermediate level with JavaScript though. And as I understand it, if I did this, I'd lose my ability to use onclick handlers for all of these divs I'm creating.
Is there an efficient way to handle my goal that I'm not aware of?
Notes:
I'm not using any framework/plugins like React, Angular, or jQuery.
Once the html is added you can always get the element by id and then add an event listener to that element. You can have functions relate to the divs and then onload create the event listeners. element.addEventListener ('click', function);

Apply scripts and styles to iFrame?

I'm trying to create a small editor for a website. One of the features is a drag and drop interface. I'd like for the user to be able to drag elements to another position in the page. I was thinking of having an iFrame of the site, and applying JS and CSS to enable drag and drop ability.
Here's a screenshot of a CMS that does that:
The site is an iFrame. When I open the iFrame, you can't drag and drop elements. So, I'm assuming that they somehow apply changes in the parent page. Is there any way that I can basically add Javascript into the iFrame?
Thanks!
As long as the page that the iframe references is on the same domain, yes, you can. You can apply scripting and styling on elements within your iframe just like you'd do to any element in your main parent page. The main syntax is this:
var ifrm = document.getElementById("your_iframe_id");
/*ifrm.contentWindow.document is the document within the iframe
so let's try styling a div with an id 'mydiv' inside the iframe:*/
ifrm.contentWindow.document.getElementById("mydiv").style.color = "red";
Of course this is just a sample, you can use the same mechanism to do more complex stuff with elements within the iframe (including drag and drop!)
You could, as well, execute functions that are defined within the iframe from the parent page. The syntax is similar and intuitive:
ifrm.contentWindow.yourFunction();
I hope that helped you in any manner!

Creating a Simple Layout/Style Editor

I am trying to create a layout/style editor similar to what is available on blogger. I noticed that they use an iframe, but the iframe has to refresh everytime you make a change. I am looking to do something more responsive. For example, if i change the width of a div I would like to see this change happening while I move the slider.
I was wondering if something like this is possible with the iframe setup using jquery/etc to modify the source of what is in the iframe, or is it better to not use an iframe?
The iframe would be used to load an existing webpage that is online.
The good thing with an iframe is that is not interfeering the rest of the page (you can use diffrent CSS, scripts, variable names and so on). TinyMCE and other editors uses iframe for its content. And yes its possible to access the iframe directly from jQuery:
See this link, http://jsbin.com/ajatix/edit#javascript,html,live

XUL IFRAME with FACEBOOK LIKE button

Is it possible to create dynamically addressed LIKE button in XUL ?
Need to place it on XUL OVERLAY toolbar.
My idea is about IFRAME addressing like_button.html in chrome:// and changing src param inside. But there is javascript interaction with button, which can be problem, isn't it?
Thanks
as far as I know there won't be any problem in changing the parameters inside or outside using JavaScript and XUL. Using DOM you can manipulate anything & you can create any elements dynamically in XUL JavaScript.
https://developer.mozilla.org/en/Dynamically_modifying_XUL-based_user_interface
https://developer.mozilla.org/en/XUL_Tutorial/Document_Object_Model
https://developer.mozilla.org/en/XUL_Tutorial/Modifying_a_XUL_Interface
http://mb.eschew.org/15
These links will be more helpful for you to go on!!!!

Categories