In my extension, I need to access some data stored by page JavaScript.
However, I also need to make sure the page cannot trick my extension into running arbitrary code. The data I need should be stored in plain old value properties (if I understand what they are) on a JS object bound to the page's window, but just in case, I want to be sure not to call any malicious code if it's present.
Is there a way to safely access this data from a content script, treating the JS object (and its children) as a simple dictionary?
I've found two pages that might offer some help:
This page describes a method of getting a reference to the page's window object, but it is unsafe to do so.
This page appears to show that Xray vision provides safe access to the value properties of an object, but does not seem to explain how to get Xray vision for a page-script object, at least from a content-script rather than actual chrome code.
Is there some way to combine these two to allow safe access to the data?
So I recently noticed that when I console.log a YUI node and inspect its _node attribute, that object has fields like "childNodes: NodeList" where NodeList is just a JS object. How does YUI provide meta-information so that web inspector knows that this object is actually a NodeList?
It may be extremely useful for debugging to be able to provide meta type information for object blobs.
Thanks
There is no meta-data. NodeList is the name of the class, and debuggers can see what class every object belongs to. In your example, somewhere a NodeList was created by calling
new NodeList();
and the engine remembers that type information.
What is the DOM and BOM in JavaScript? If someone could explain these in layman terms it would be great! I like to get a deeper understanding of these.
The BOM (Browser Object Model) consists of the objects navigator, history, screen, location and document which are children of window. In the document node is the DOM (Document Object Model), the document object model, which represents the contents of the page. You can manipulate it using javascript.
DOM - Document Object Model
BOM - Browser Object Model
This article explains relationship between Javascript, DOM and BOM.
They're just different objects you're dealing with:
The DOM is the Document Object Model, which deals with the document, the HTML elements themselves, e.g. document and all traversal you would do in it, events, etc.
The BOM is the Browser Object Model, which deals with browser components aside from the document, like history, location, navigator and screen (as well as some others that vary by browser).
DOM means Document Object model..when the webpage is loaded the browser creates a document object model for the page..All the objects are arranged as tree structure...
BOM means Browser Object Model.window object is supported by all browsers it represents the window browser..All global JavaScript objects, functions, and variables automatically become members of the window object.
You can find more information about Javascript on Mozilla Foundation.
DOM
https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference/Introduction
BOM
https://developer.mozilla.org/en-US/docs/WebAPI/Browser
DOM :
The document object represents the whole html document. When html document is loaded in the browser, it becomes a document object.
BOM :
The window object represents a window in browser. An object of window is created automatically by the browser.
BOM means Browser Object Model . These are objects that you can use to manipulate the browser. they are navigator
navigator
screen
location
history
document
they are all children of the Window Object.
DOM is Document Object Model is part of the BOM and it helps you manipulate the content of the loaded page file. this include the HTML and CSS
DOM -> Document Object Model in JavaScript is the API to access the elements inside the document. It maps the entire Document into an hierarchy of parent and child tree. Each node can hold number of children element or can inherit to other parent element in some or the other way.
BOM -> Browser Object Model is a larger representation of everything provided by the browser including the current document, location, history, frames, and any other functionality the browser may expose to JavaScript. The Browser Object Model is not standardized and can change based on different browsers.
BOM stands for Browser Object Model. Unlike DOM, there is no standard defined for BOM, hence different browsers implement it in different ways. The collection of browser objects is collectively known as the Browser Object Model.
BOM main task is to manage browser windows and enable communication between the windows (i.e BOM deals with entire browser). Each HTML page which is loaded into a browser window becomes a Document object and a document object is an object in the BOM. You can say BOM is a superset of DOM. BOM has many objects, methods, and properties that are not part of the DOM structure.
while
DOM stands for Document Object Model. It is a standard defined by W3C (World Wide Web Consortium) and is specific to current HTML document (i.e DOM deals with document alone). DOM is a programming interface (API) for representing and interacting with HTML, XHTML and XML documents. It organizes the elements of the document in a tree structure (DOM tree) and in the DOM tree, all elements of the document are defined as objects (tree nodes) which have properties and methods.
DOM tree objects can be accessed and manipulated with the help of any programming language since it is cross-platform and language-independent. DOM is a subset of BOM, we can manipulate DOM tree with the help of JavaScript and jQuery for example.
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
DOM Methods:
document.getElementById(id)
document.getElementsByTagName(name)
document.getElementsByClassName(name)
document.createElement(element)
document.removeChild(element)
Properties:
document.body
document.cookie
document.doctype
document.documentElement
document.documentMode
More details
The Browser Object Model (BOM)
There are no official standards for the Browser Object Model (BOM).
Since modern browsers have implemented (almost) the same methods and properties for JavaScript interactivity, it is often referred to, as methods and properties of the BOM. It consists:
window
screen
location
history
navigator
popup alert
timing
cookies
More Details
Should I be using alert() for debugging; or is there a time to use alert() vs. console.log()?
I see that alert() and console.log() can return different results. I assumed that they were similar functions but just returned in different places.
Back story: my boss likes to see alerts() during development but I can't get the object details in the alert (at least not easily).
But when I run the same request through console.log, I get the object and all of it's parameters.
Since alert could be shown to users, it tends to be literal-minded (just using toString) so a developer has a lot of control over what's shown to the user. Unlike alert, console is designed for developers, and thus tends to try to interpret a call so as to provide information that a developer would find useful: e.g. "[2, 3, 4]" is a lot more useful to a developer than "[object Object]". Alert should be the same in every browser; console's behavior could vary from browser to browser (including not being supported at all, as in IE).
alert() converts the object passed to it into a string using the object's toString() method. Unlike alert(), console.log() is not limited to displaying a simple string and can allow you to interact with the object passed to it, for example letting you inspect its properties.
try alert(JSON.stringify(yourObject)); (if your browser have json.stringify....)
The problem is that, by default, Prototype library can’t access anything in the iframe.
There is some workarounds I found (e.g example) but no one provides full support for protytpe/iframes. Does anyone know a way to do that?
PS: not using iframes is not an option :)
If you want to use Prototype in different documents — and iframes are different documents — you must include the script in every document, and use the right copy to access the associated document.
The same goes for jQuery and any other framework that refers directly to document. Each instance of the library is associated with its own document object. So when you create an element from the parent script, its ownerDocument is the parent window. Try to append that element inside the iframe's document and you should get a DOMException.WRONG_DOCUMENT_ERR.
var iframe= $('myiframe');
// get window and document objects for iframe (IE compatible)
var idoc= iframe.contentDocument || iframe.contentWindow.document;
var iwin= iframe.contentWindow || iframe.contentDocument.defaultView;
Element.extend(idoc);
idoc.body.insert('<div>hello</div>'); // fail, wrong document
iwin.Element.extend(idoc); // use the copy of Prototype in the iframe's window
idoc.body.insert('<div>hello</div>'); // ok
(Note that in Firefox you won't actually get a WRONG_DOCUMENT_ERR because they deliberately fix up this error for you silently. But more complicated manipulations can quickly get you in odd, inconsistent states.)
Most JS libraries are designed to make single-document scripting easy; they hide away much of the gory detail involved in DOM manipulation, and one of the ways they do that is by eliding the document object. But this makes them less suited to cross-document scripting, where knowing which document to use is vital.
Cross-document scripting is already confusing. Using a JS framework that is not specifically designed to handle it (and I don't know of one that is) just makes life even weirder.