Open kyr0 opened 3 years ago
Hi,
there is an issue with a specific security condition where this hook can potentially break a whole web application, also production deploys, just by using it in the intended way.
If you integrate a web app inside of an but this <iframe> is not served from the same domain, we have a typical "vertical" / "whitelabel" / "intranet integration" / "extranet integration" use-case.</p> <p>This standard use case can potentially break a whole application and render a white-screen in production when the user is visiting that site in private mode. In this condition, browsers like Chrome and Firefox activate specific security rules that cause a DOMException to happen, only if you just try to read window.sessionStorage / window.localStorage in your code:</p> <p>This is happening here: <a rel="noreferrer nofollow" target="_blank" href="https://github.com/tiaanduplessis/react-hook-form-persist/blob/master/src/index.js#L16">https://github.com/tiaanduplessis/react-hook-form-persist/blob/master/src/index.js#L16</a></p> <p>And causes:</p> <p><img referrerpolicy="no-referrer" src="https://user-images.githubusercontent.com/454817/142220343-d34b0f55-9f0d-445f-883e-1bd1bee76eaf.png" alt="Bildschirmfoto 2021-11-17 um 15 30 19" /></p> <p>...based on production transpiled and minified code from this lib: <code>react-hook-form-persist.js":function(e,t,n){var r=n("../../node_modules/react/index.js");e.exports=function(e,t,n){var a=t.watch,o=t.setValue,i=void 0===n?{}:n,s=i.storage,l=void 0===s?window.sessionStorage:s,</code></p> <p>There are two ways to fix this:</p> <ul> <li>you can wrap every use of the hook in try/catch</li> <li>we can do that in the lib and provide a mock storage implementation, backed by a global variable object to persist data (more or less like sessionStorage, just that it wouldn't survive hard reloads, which is probably better than breaking code completely and at least gives a working app in most cases; just needs to be documented well)</li> </ul> <p>I have that in code already and can PR it. </p> <p>Are you aware of this thing and would you accept a PR?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/tiaanduplessis"><img src="https://avatars.githubusercontent.com/u/18066992?v=4" />tiaanduplessis</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Hi @kyr0. Thank you for creating the detailed issue and sorry for the delayed response. I wasn't aware of it and will be very happy to accept a PR that resolves it.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>
Hi,
there is an issue with a specific security condition where this hook can potentially break a whole web application, also production deploys, just by using it in the intended way.
If you integrate a web app inside of an