<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Javascript on Wilhelm Maritz</title><link>https://wjmaritz.dev/tags/javascript/</link><description>Recent content in Javascript on Wilhelm Maritz</description><generator>Hugo -- gohugo.io</generator><language>en</language><lastBuildDate>Fri, 11 Sep 2026 00:00:00 +0000</lastBuildDate><atom:link href="https://wjmaritz.dev/tags/javascript/index.xml" rel="self" type="application/rss+xml"/><item><title>The date that was yesterday until 3am</title><link>https://wjmaritz.dev/posts/utc-date-names-yesterday/</link><pubDate>Fri, 11 Sep 2026 00:00:00 +0000</pubDate><guid>https://wjmaritz.dev/posts/utc-date-names-yesterday/</guid><description>&lt;p&gt;This line looks harmless:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-js" data-lang="js"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#66d9ef"&gt;const&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;today&lt;/span&gt; &lt;span style="color:#f92672"&gt;=&lt;/span&gt; &lt;span style="color:#66d9ef"&gt;new&lt;/span&gt; Date().&lt;span style="color:#a6e22e"&gt;toISOString&lt;/span&gt;().&lt;span style="color:#a6e22e"&gt;slice&lt;/span&gt;(&lt;span style="color:#ae81ff"&gt;0&lt;/span&gt;, &lt;span style="color:#ae81ff"&gt;10&lt;/span&gt;);
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;&lt;code&gt;toISOString()&lt;/code&gt; gives the UTC date. I live in UTC+3, so from midnight until 03:00 every night that line names &lt;em&gt;yesterday&lt;/em&gt;, and on the first of a month it names the previous &lt;em&gt;month&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;An app I maintain did it in three places: the today marker on a calendar, and a gate on the admin page that decides whether the month you&amp;rsquo;re editing is already in the past, twice. Nobody had noticed, because nobody uses a rostering app at 2am. Except the schedulers, who work nights. It surfaced in the review of &lt;a href="https://wjmaritz.dev/posts/csp-without-nonces/"&gt;the change that moved the app&amp;rsquo;s scripts out of its templates&lt;/a&gt;, as an old bug in code that change had only relocated.&lt;/p&gt;</description></item><item><title>Enforcing a Content-Security-Policy without nonces</title><link>https://wjmaritz.dev/posts/csp-without-nonces/</link><pubDate>Thu, 10 Sep 2026 00:00:00 +0000</pubDate><guid>https://wjmaritz.dev/posts/csp-without-nonces/</guid><description>&lt;p&gt;An app I maintain kept its JavaScript inline. The main page&amp;rsquo;s template was 3,979 lines, and 3,528 of them were one &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; block. Eight other pages were the same shape, around 6,500 lines in all.&lt;/p&gt;
&lt;p&gt;That rules out a strict Content-Security-Policy. A policy that blocks injected scripts has to drop &lt;code&gt;'unsafe-inline'&lt;/code&gt; from &lt;code&gt;script-src&lt;/code&gt;, and then every one of those blocks stops running. The usual answer is a nonce per request on every script tag. I didn&amp;rsquo;t build that.&lt;/p&gt;</description></item><item><title>Safari could not download the file</title><link>https://wjmaritz.dev/posts/safari-blob-download/</link><pubDate>Wed, 02 Sep 2026 00:00:00 +0000</pubDate><guid>https://wjmaritz.dev/posts/safari-blob-download/</guid><description>&lt;p&gt;A Mac user clicked Export in an app I maintain and got this instead of a spreadsheet:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-text" data-lang="text"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;WebKitBlobResource error 1
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="the-pattern-that-broke"&gt;The pattern that broke&lt;/h2&gt;
&lt;p&gt;The download code was the pattern you find everywhere: fetch the file, turn it into a blob, point an invisible link at it, click the link, tidy up. In outline:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-js" data-lang="js"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#66d9ef"&gt;async&lt;/span&gt; &lt;span style="color:#66d9ef"&gt;function&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;download&lt;/span&gt;(&lt;span style="color:#a6e22e"&gt;url&lt;/span&gt;, &lt;span style="color:#a6e22e"&gt;name&lt;/span&gt;) {
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;const&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;res&lt;/span&gt; &lt;span style="color:#f92672"&gt;=&lt;/span&gt; &lt;span style="color:#66d9ef"&gt;await&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;fetch&lt;/span&gt;(&lt;span style="color:#a6e22e"&gt;url&lt;/span&gt;);
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;const&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;blob&lt;/span&gt; &lt;span style="color:#f92672"&gt;=&lt;/span&gt; &lt;span style="color:#66d9ef"&gt;await&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;res&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;blob&lt;/span&gt;();
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#66d9ef"&gt;const&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;a&lt;/span&gt; &lt;span style="color:#f92672"&gt;=&lt;/span&gt; document.&lt;span style="color:#a6e22e"&gt;createElement&lt;/span&gt;(&lt;span style="color:#e6db74"&gt;&amp;#34;a&amp;#34;&lt;/span&gt;);
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#a6e22e"&gt;a&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;href&lt;/span&gt; &lt;span style="color:#f92672"&gt;=&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;URL&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;createObjectURL&lt;/span&gt;(&lt;span style="color:#a6e22e"&gt;blob&lt;/span&gt;);
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#a6e22e"&gt;a&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;download&lt;/span&gt; &lt;span style="color:#f92672"&gt;=&lt;/span&gt; &lt;span style="color:#a6e22e"&gt;name&lt;/span&gt;;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#a6e22e"&gt;a&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;click&lt;/span&gt;();
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#a6e22e"&gt;URL&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;revokeObjectURL&lt;/span&gt;(&lt;span style="color:#a6e22e"&gt;a&lt;/span&gt;.&lt;span style="color:#a6e22e"&gt;href&lt;/span&gt;);
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;The app had four hand-rolled copies of it.&lt;/p&gt;</description></item></channel></rss>