Issue #281 (document.domain, Testing, Git/CLI, JS Utils)12/06/18
Improve the Stability of Your Applications
Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Over 4,500 of the world's best engineering teams use Bugsnag to improve application stability.
Learn more
|
|
If I have a page on impressivewebs.com that loads an iframe with its src set to testing.impressivewebs.com, I can't access the iframe's DOM from the parent page. This is for security reasons. Even though both resources are on the same domain, the subdomain is considered a different origin.
There are various ways to overcome cross-origin restrictions, but one easy way to do this, assuming you have access to both origins, is using the document.domain property in JavaScript.
Let's say my primary page is loading an iframe:
|
<iframe src="https://testing.impressivewebs.com/">
</iframe>
|
Below the iframe, I'm loading the following script:
|
document.domain = 'impressivewebs.com';
let myFrame = document.getElementsByTagName('iframe')[0];
window.addEventListener('load', function() {
console.log(myFrame.contentWindow.document.body.tagName);
}, false);
|
Also, inside the iframe's page, I'm doing this:
|
document.domain = 'impressivewebs.com';
console.log(parent.document.body.id);
|
You can try it out at this demo page. Open up the console and you'll see the two logs that are printed.
Notice two things happening in the each document:
- The document.domain property is set to impressivewebs.com
- The DOM of the other document is accessible
Neither document would be able to access the other's DOM unless the document.domain property is set to the same value (or if you use some other method to overcome the restriction).
The document.domain property can only be set to the current domain and can't be changed to another resource (more info on MDN). This is just a quick way to relax these restrictions, but normally you would do this sort of thing using CORS, which has long been a standard.
Now on to this week's tools!
|
Testing and Debugging Tools
Improve the Stability of Your Applications
Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Over 4,500 of the world's best engineering teams use Bugsnag to improve application stability. sponsored via Paved 
Link Contrast Checker
Online tester to see if your text links are accessible (i.e. they pass various WCAG guidelines).
WebGazer
Monitoring service that checks if your website is up as it should be and notifies you if anything goes wrong.
Consola
An elegant, multi-featured console logger for Node.js and the browser.
LambdaTest
Perform cross-browser testing on 2000+ real browsers and operating systems online.
Inspectlet
Records videos of your visitors as they use your site, allowing you to see everything they do. See every mouse movement, scroll, click, and keypress on your site.
Mixpanel
User behavior analytics for product, marketing, and data teams.
Appsee
App analytics platform that provides an in-depth analysis of your users' behavior, allowing you to deliver the ultimate app experience.
My Browser
When you visit this page it gives you an easy-to-digest summary of your browser details to help you with QA and tech support. Report is shareable via a unique URL.
RxJS TSLint
TSLint rules targeting RxJS.
Pagekite
The fast, reliable localhost tunneling solution. With relays on four continents, it works with any computer, any web server, and any Internet connection.
|
|
Developer Courses by Wes Bos are still 50% off!
|
Git, GitHub, and Command Line Tools
module-bin-path
Get the absolute file path to a bin entry of an installed dependency. Useful if you want to include a CLI as an npm dependency and spawn it from node.
Dennard
Tiny Node CLI tool to see a local app's memory footprint, cross-platform.
Ervy
Brings charts (bars, pie graphs, etc.) to the terminal.
generate-ssl-certs-for-local-development
A bash script for generating trusted self-signed SSL certs for local development on your Mac.
twa
A tiny web auditor with strong opinions.
ghuser.io
Better GitHub profiles.
linuxify
Transparently transform the macOS CLI into a fresh GNU/Linux CLI experience.
Appfairy
A CLI tool to Migrate a Webflow project into a React app.
GitHunt
React application and Chrome extension that lets you explore the most starred projects on GitHub, with optional filter by language.
Mirror
A blogging tool powered by GitHub. Write your blog on GitHub issues.
|
|
Recommended Reading for Developers
|
JavaScript Utilities
Glider.js
A blazingly fast, crazy small, fully responsive, mobile-friendly, dependency free, native scrolling slider/list with paging controls.
Enquirer
Stylish CLI prompts that are user-friendly, intuitive and easy to create.
Tea-School
Simplified HTML + CSS to PDF Generator for Node.
TeXMe
A lightweight JavaScript utility to create self-rendering Markdown + LaTeX documents.
Hypernova
A service for server-side rendering your JavaScript views.
ScrollOut
Detects changes in scroll for reveal, parallax, and CSS variable effects.
idle-until-urgent
Defer JavaScript work until the browser has a chance to breathe.
croatia
Spawn a process and clear its output when succeeded.
to-radix-tree
Convert a series of strings into a radix tree.
nanocal
Date and range picker that work with or without build tools and with or without frameworks.
|
|
