Daily Learnings: Tue, Jan 30, 2024
Laughter is not at all a bad beginning for a friendship, and it is far the best ending for one. — Oscar Wilde
Content Security Policies in HTML
From issue 257 of the fantastic Javascript / web dev newsletter Bytes: TIL about the ability to set Content Security policies directly in the HTML of a given page using specific <meta> tags. I knew this is usually done via HTTP headers coming back from a server rather than in the page markup itself, but good to know that you can have per-page policies set where needed too.
This example shows what you’d need to have in your page if you were trying to set these security policies in your HTML, only wanting to allow resources from the same origin as the page itself. Note that we’re also attempting to import the Bootstrap styles from their CDN, so we also need to include that domain in our <meta> tag outlining the policy as well.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Note the policy here allowing the import from the Bootstrap CDN -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; style-src https://stackpath.bootstrapcdn.com;"
/>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
<body>
<h1>Hello, World!</h1>
<button class="btn btn-primary">Click Me</button>
</body>
</html>
Other Niceties from the Newsletter
Some other nice links from the newsletter that I found interesting:
- Adam Argyle wrote here about some really nice CSS “snippets” or ways to approach styling that folks should be aware of