The “clickjacking” attack allows an evil page to click on a “victim site” on behalf of the visitor.… Many sites were hacked this way, including Twitter, Facebook, Paypal and other sites.… This not a reliable defence, because there are many ways to hack around it. Let’s cover a few.… So, <meta http-equiv="X-Frame-Options"...> won’t do anything.… Other sites won’t be able to show our page in a frame, even if they have good reasons to do so.
Between these releases, the latest specification draft is at https://tc39.es/ecma262/.… You can find it at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference.… Although, it’s often best to use an internet search instead.… Just use “MDN [term]” in the query, e.g. https://google.com/search?… =cryptography.
https://kangax.github.io/compat-table – a table with language features and engines that
With this attribute, if a cookie is set by https://site.com, then it doesn’t appear when the same site… is accessed by HTTP, as http://site.com.… That site has JavaScript code that submits a form <form action="https://bank.com/pay">… That shouldn’t be possible at all, hackers should not be able to inject their code into our site, but… For instance:
A page at site.com loads a banner from another site: <img src="https://ads.com
If we send a fetch request to another web-site, it will probably fail.… For many years a script from one site could not access the content of another site.… Let’s say we, at our site, need to get the data from http://another.com, such as the weather:
First… For instance, if we request https://anywhere.com/request from https://javascript.info/page, the headers… That’s uncommon for HTTP-requests.
The HTML spec at https://html.spec.whatwg.org is not only about the “HTML language” (tags, attributes… Also, some parts have additional specs listed at https://spec.whatwg.org.… Additionally, some classes are described separately at https://spec.whatwg.org/.… /en-US/ is also a nice resource, but the corresponding spec may be better: it’s more complex and longer… q=whatwg+localstorage, https://google.com?q=mdn+localstorage.
The “Same Origin” (same site) policy limits access of windows and frames to each other.… These URLs all share the same origin:
http://site.com
http://site.com/
http://site.com/my/page.html… These ones do not:
http://www.site.com (another domain: www. matters)
http://site.org (another domain… : .org matters)
https://site.com (another protocol: https)
http://site.com:8080 (another port: 8080)… That can be used to run untrusted code in iframes from the same site.
Please note that we can’t get HTTP… Crossorigin policy.There’s a rule: scripts from one site can’t access contents of the other site.… So, e.g. a script at https://facebook.com can’t read the user’s mailbox at https://gmail.com.… call:
Now load it from the same site
At this stage we can check HTTP status, to see whether it is successful or not, check headers, but don… such site.… Abnormal HTTP-statuses, such as 404 or 500 do not cause an error.… We can see HTTP-status in response properties:
status – HTTP status code, e.g. 200.
ok – boolean, true… if the HTTP status code is 200-299.
Request from HTTPS to HTTP (from safe to unsafe protocol).… →HTTP request, then send nothing.… "strict-origin" – send only the origin, not the Referer for HTTPS→HTTP requests.… "unsafe-url" – always send the full url in Referer, even for HTTPS→HTTP requests.… to HTTP, then no Referer).
acceptable, if it’s short:
😃 The best… It’s best practice to split them.… Otherwise, it’s best to use semicolons to avoid possible pitfalls.… Then you can browse other style guides to pick up more ideas and decide which one you like best.… See https://eslint.org/docs/user-guide/getting-started for more details about installation.
For instance, in the code below the URL to fetch is wrong (no such site) and .catch handles the error… Or, maybe, everything is all right with the site, but the response is not valid JSON.… Usually such errors are unrecoverable, so our best way out is to inform the user about the problem and
even in this case, JavaScript from one page may not access the other page if they come from different sites… A page from http://anysite.com which a user has opened must not be able to access another browser tab… with the URL http://gmail.com, for example, and steal information from there.… But its ability to receive data from other sites/domains is severely limited.… Though possible, it requires explicit agreement (expressed in HTTP headers) from the remote side.
For screenshotting a page, we can use a library such as https… It’s outside of our scope here, but here’s an example, and you can read more at https://developer.mozilla.org… /en-US/docs/Web/API/Streams_API.
The native interface to IndexedDB, described in the specification https://www.w3.org/TR/IndexedDB, is… Let’s say:
A visitor opened our site in a browser tab, with database version 1.… And then the same visitor opens our site in another tab.… The problem is that a database is shared between two tabs, as it’s the same site, same origin.… The examples are at the lib page https://github.com/jakearchibald/idb.
It’s like HTTPS for websockets.… On the other hand, wss:// is WebSocket over TLS, (same as HTTPS is HTTP over TLS), the transport security… And that’s not HTTP at all.… WebSocket codes are somewhat like HTTP codes, but different.… ://site.com goes to the main HTTP-server.
XMLHttpRequest is a built-in browser object that allows to make HTTP requests in JavaScript.… These three events are the most widely used:
load – when the request is complete (even if HTTP status… status code (a number): 200, 404, 403 and so on, can be 0 in case of a non-HTTP failure.
statusText… HTTP-headers.XMLHttpRequest allows both to send custom headers and read headers from the response.… Just like fetch, it doesn’t send cookies and HTTP-authorization to another origin by default.
The best way to study them is to click around. Most values are editable in-place.… There’s an extensive documentation about Chrome Developer Tools at https://developers.google.com/web/… The best way to learn the tools is to click here and there, read menus: most options are obvious.
open-source utilities used by millions for decades – suddenly a bug may be discovered that leads to terrible hacks… There are also web-services that provide error-logging for such cases, like https://muscula.com or https
language appear regularly, they are analyzed and, if considered worthy, are appended to the list at https… A good page to see the current state of support for language features is https://compat-table.github.io… Good resources that show the current state of support for various features:
https://compat-table.github.io… /compat-table/es6/ – for pure JavaScript.
https://caniuse.com/ – for browser-related functions.
list would require a lot of space, so here are the references:
List all properties by a character: https… List all characters by a property: https://unicode.org/cldr/utility/list-unicodeset.jsp.… Short aliases for properties: https://www.unicode.org/Public/UCD/latest/ucd/PropertyValueAliases.txt.… A full base of Unicode characters in text format, with all properties, is here: https://www.unicode.org
Also unlike cookies, the server can’t manipulate storage objects via HTTP headers.… Imagine, you have two windows with the same site in each. So localStorage is shared between them.
One-directional: only server sends data
Binary and text data
Only text
WebSocket protocol
Regular HTTP… Besides, it’s a plain old HTTP, not a new protocol.… If the server wants the browser to stop reconnecting, it should respond with HTTP status 204.… Also, there will be no reconnection if the response has an incorrect Content-Type or its HTTP… the connection is open.
error – the connection could not be established, e.g. the server returned HTTP
For instance, we can do it on the site https://cubic-bezier.com.… You probably won’t need @keyframes often, unless everything is in constant motion on your sites.… You can find a longer list of CSS properties and which stages they trigger at https://csstriggers.com
We’ll do the best to cover them further on.… The best recipe is to be careful when using these events.
Their cost is usually negligible compared to a qualified developer’s salary, so just choose the best
Built-in events mostly have composed: true, as described in the relevant specifications:
UI Events https… Touch Events https://w3c.github.io/touch-events.… Pointer Events https://www.w3.org/TR/pointerevents.
…And so on.
hash starts with the hash character #
there may be also user and password properties if HTTP authentication… is present: http://login:password@site.com (not painted above, rarely used).… …”.Let’s say we want to create a url with given search params, for instance, https://google.com/search
Most developers lean towards Chrome or Firefox for development because those browsers have the best developer
E.g. if the user actions on our site indicate that the fetch isn’t needed any more.
You probably saw that on some sites (if you use browser autofill) – the login/password fields don’t get… exists a special navigator.sendBeacon(url, data) method for such needs, described in the specification https
It works only partially on this site, as Node.js is behind another server named Nginx, that buffers uploads
If we want to handle every modification of an <input> then this event is the best
DOM: https://dom.spec.whatwg.org/#shadow-trees
Compatibility: https://caniuse.com/#feat=shadowdomv1
Shadow
Native events might be generated:
As a dirty hack to make 3rd-party libraries work the needed way, if
One of the best things about objects is that we can store a function as one of its properties.
The full specification of the <select> element is available in the specification https… Specification: https://html.spec.whatwg.org/multipage/forms.html.
HTML Living Standard: https://html.spec.whatwg.org/#custom-elements.… Compatiblity: https://caniuse.com/#feat=custom-elementsv1.… There’s a polyfill https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs.
to retrieve commits in the same, paginated fashion:
We should make a request to fetch in the form https… The initial URL is https://api.github.com/repos/<repo>/commits, and the next page will be in the… The next page URL may look like https://api.github.com/repositories/93253246/commits?page=2.
That’s best demonstrated with an example:
Or a department may split into subdepartments, like development has two branches: sites and internals… For instance, the sites department in the future may be split into teams for siteA and siteB.… But then we need more nested subloops to iterate over the staff in 2nd level departments like sites…
Here, /path/to/script.js is an absolute path to the script from the site
Imagine you’re making an e-shopping site and the visitor puts $0.10 and $0.20 goods into their cart.… It does its best to fit the number into the desired format, but unfortunately, this format is not big
You can find the current state of support at https://caniuse.com/#feat=bigint.
Modules work only via HTTP(s), not locally
If you try to open a web-page locally, via file… External scripts that are fetched from another origin (e.g. another site
One of the best ways is to use “promises”, described in the next chapter.
So opening a popup from a third-party, non-trusted site is safe.
It’s very easy to open a popup.… Popup blocking.In the past, evil sites abused popups a lot.
-- https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/Images/src/largeIcons.svg… The full manual is at https://developers.google.com/web/tools/chrome-devtools.
We don’t want unexpected HTML in our site. An assignment to textContent does exactly that.… For instance, HTMLInputElement is documented at https://html.spec.whatwg.org/#htmlinputelement.
You can read more information about JSDoc at https://jsdoc.app.
Why is the task solved this way?
I’m saying: “V8”, because it is best covered by articles on the internet.
Only first 50 results are shown.