<p dir="auto">Not sure if it is a bug or just general confusion. Tried only with 0.12.2, not with master.</p>
<p dir="auto"><code class="notranslate">this.forceUpdate();</code> crashes when a component is not mounted, which in itself makes sense, I'd say. However, if you call <code class="notranslate">this.forceUpdate()</code> directly in <code class="notranslate">componentWillMount</code>, it <em>doesn't</em> crash, which suggests that it's OK to do (just as <code class="notranslate">setState</code> is OK to call there).</p>
<p dir="auto">This happens if you use a Flux-like architecture but don't use the <code class="notranslate">componentDidMount</code>/<code class="notranslate">setState</code> combination (as Flux suggests) but <code class="notranslate">componentWillMount</code>/<code class="notranslate">forceUpdate</code>.</p>
<p dir="auto">The error that you get is "Invariant Violation: receiveComponent(...): Can only update a mounted component."</p>
<p dir="auto">This example shows the problem: <a href="http://jsfiddle.net/8s9we7gj/3/" rel="nofollow">http://jsfiddle.net/8s9we7gj/3/</a></p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Report a bug.</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
React 16.9.0 deprecates <code class="notranslate">javascript:</code> URLs (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sebmarkbage/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/sebmarkbage">@sebmarkbage</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="418111620" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/15047" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/15047/hovercard" href="https://github.com/facebook/react/pull/15047">#15047</a>). It was motivated by preventing XSS vulnerability that can be used by injecting client-side scripts:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;a href={url}&gt;Unsafe Link&lt;/a&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">url</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>Unsafe Link<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">a</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">The following code cannot be exploited by attackers, it cannot be used to inject XSS:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;a href=&quot;javascript:void(0)&quot;&gt;Safe Link&lt;/a&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-s">"javascript:void(0)"</span><span class="pl-c1">&gt;</span>Safe Link<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">a</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">React 16.9 reports the security precaution warning for the example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Warning: A future version of React will block javascript: URLs as a security precaution. Use event handlers instead if you can. If you need to generate unsafe HTML try using dangerouslySetInnerHTML instead. React was passed &quot;javascript:void(0)&quot;."><pre class="notranslate"><code class="notranslate">Warning: A future version of React will block javascript: URLs as a security precaution. Use event handlers instead if you can. If you need to generate unsafe HTML try using dangerouslySetInnerHTML instead. React was passed "javascript:void(0)".
</code></pre></div>
<p dir="auto"><a href="https://codesandbox.io/s/determined-rgb-sws4g?fontsize=14" rel="nofollow"><img src="https://camo.githubusercontent.com/90808661433696bc57dce8d4ad732307b5cec6270e6b846f114dcd7ee7f9458a/68747470733a2f2f636f646573616e64626f782e696f2f7374617469632f696d672f706c61792d636f646573616e64626f782e737667" alt="Edit determined-rgb-sws4g" data-canonical-src="https://codesandbox.io/static/img/play-codesandbox.svg" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">I would expected that security precaution warnings aren't reported for values that cannot be controlled by attackers.</p>
<p dir="auto">There were also <a href="https://github.com/facebook/react/pull/15047/files#r264357918">concerns</a> regarding common patterns like <code class="notranslate">javascript:void(0)</code>, see <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gaearon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/gaearon">@gaearon</a> comment:</p>
<blockquote>
<p dir="auto">Especially javascript:void(0) seems like it's still pretty common because it's copy pasted from old samples etc. Is it dangerous to whitelist that one? Is it a vector by itself?</p>
</blockquote>
<p dir="auto">If there're tons of reported security issues, you definitely ignore something important.</p>
<p dir="auto">For reference: <a href="https://angular.io/guide/security#angulars-cross-site-scripting-security-model" rel="nofollow">Angular’s cross-site scripting security model</a></p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<p dir="auto">React 16.9.0 is affected. 16.8.6 doesn't report the warning.</p>