Same origin `<iframe>` rendering about pico HOT 2 OPEN rsify commented on June 5, 2024 Same origin `` rendering<p>from pico.</p></section> </section> </article> <article> <h2 class="h2">Comments (2)</h2> <section class="issue-comment"> <section id="635515938" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/7091471?s=30&u=385d246e52f0c6439d3a79628fb02c90845fd98c&v=4" alt="rsify avatar" /> <a class="issue-username" href="/rsify">rsify</a> <span class="issue-time"> commented on June 5, 2024 </span> <span class="issue-vote"> <i class="icon-vote"></i>1 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">Real world example: text editor in <a href="https://collabuml.com" rel="nofollow">https://collabuml.com</a>.</p><p>from pico.</p></section> </section> <section class="issue-comment"> <section id="639487922" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1275293?s=30&v=4" alt="pauldijou avatar" /> <a class="issue-username" href="/pauldijou">pauldijou</a> <span class="issue-time"> commented on June 5, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">I tried to use Pico and ran into that issue (our whole app is running inside an iframe during development for some... valid reasons). So using Pico would only screenshot all the devtools we have around the iframe and not the app itself inside it.</p> <p dir="auto">I wanted to only screenshot the iframe itself next, since that's what I actually care about, doing something like:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="pico.objectURL(document.querySelector("#myIframe").contentWindow).then(url => {})"><pre class="notranslate"><span class="pl-s1">pico</span><span class="pl-kos">.</span><span class="pl-en">objectURL</span><span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"#myIframe"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">contentWindow</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-s1">url</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div> <p dir="auto">But this crashed due to <code class="notranslate">getWindowInfo</code> checking the <code class="notranslate">instanceof</code> compared to the global ones. Can be solved by doing:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=" if (!($html instanceof $window.HTMLHtmlElement)) { return left(err('Failed to get HTMLHtmlElement')) } if (!($body instanceof $window.HTMLBodyElement)) { return left(err('Failed to get HTMLBodyElement')) }"><pre class="notranslate"> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-kos">(</span><span class="pl-s1">$html</span> <span class="pl-k">instanceof</span> <span class="pl-s1">$window</span><span class="pl-kos">.</span><span class="pl-c1">HTMLHtmlElement</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-en">left</span><span class="pl-kos">(</span><span class="pl-en">err</span><span class="pl-kos">(</span><span class="pl-s">'Failed to get HTMLHtmlElement'</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">}</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-kos">(</span><span class="pl-s1">$body</span> <span class="pl-k">instanceof</span> <span class="pl-s1">$window</span><span class="pl-kos">.</span><span class="pl-c1">HTMLBodyElement</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-en">left</span><span class="pl-kos">(</span><span class="pl-en">err</span><span class="pl-kos">(</span><span class="pl-s">'Failed to get HTMLBodyElement'</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">}</span></pre></div> <p dir="auto">(there is a Typescript error but that's actually valid)</p> <p dir="auto">This will now screenshot the content of the iframe but without the correct rendering. Seems like most CSS (if not all) is missing.</p> <p dir="auto">That's how far I could go :-)</p><p>from pico.</p></section> </section> </article> <section> <h2 class="h2">Related Issues (16)</h2> <div class="issue"> <ul> <li> <a href="/rsify/pico/issues/1">Proxy failed CORS requests</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span> </li> <li> <a href="/rsify/pico/issues/2">Inline `url()`'s in `style` attributes</a> </li> <li> <a href="/rsify/pico/issues/3">Option to ignore cloning certain nodes</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/rsify/pico/issues/4">Support running animations</a> </li> <li> <a href="/rsify/pico/issues/5">Subresource placeholders</a> </li> <li> <a href="/rsify/pico/issues/7">Copy current `<video>` frame</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/rsify/pico/issues/8">Only download used font files</a> </li> <li> <a href="/rsify/pico/issues/9">Capture svg with href - link to a resource</a> </li> <li> <a href="/rsify/pico/issues/10">Example on codesandbox.io or similar </a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 5</span> </li> <li> <a href="/rsify/pico/issues/11">Capture cursor position</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/rsify/pico/issues/12">New Feature: Please Provide Real World Example Usage</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/rsify/pico/issues/13">Some webfonts not working (only firefox)</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/rsify/pico/issues/14">Dependency future.js throwing an error</a> </li> <li> <a href="/rsify/pico/issues/15">Gripeless has been discontinued.</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span> </li> <li> <a href="/rsify/pico/issues/16">Safari support</a> </li> </ul> </div> </section> </main> <section id="more" class="flex-none w-full md:w-60 text-gray-600 bg-gray-50 px-5 md:px-3 rounded-md dark-color"> <div class="w-full md:w-60 h-0.5"></div> <section> <!-- recommend projects --> <h2 class="h2 py-3.5">Recommend Projects</h2> <ul> <li class="mb-4"> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/facebook/react"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://raw.githubusercontent.com/facebook/create-react-app/master/packages/cra-template/template/public/logo192.png" alt="React photo" /> React </a> </h3> <p class="article-more pt-1">A declarative, efficient, and flexible JavaScript library for building user interfaces.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/vuejs/vue"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67" alt="Vue.js photo" /> Vue.js </a> </h3> <p class="article-more pt-1">🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/microsoft/TypeScript"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://www.typescriptlang.org/favicon-32x32.png" alt="Typescript photo" /> Typescript </a> </h3> <p class="article-more pt-1">TypeScript is a superset of JavaScript that compiles to clean JavaScript output.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/tensorflow/tensorflow"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://camo.githubusercontent.com/c04e16c05de80dadbdc990884672fc941fdcbbfbb02b31dd48c248d010861426/68747470733a2f2f7777772e74656e736f72666c6f772e6f72672f696d616765732f74665f6c6f676f5f736f6369616c2e706e67" alt="TensorFlow photo" /> TensorFlow </a> </h3> <p class="article-more pt-1">An Open Source Machine Learning Framework for Everyone</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/django/django"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars2.githubusercontent.com/u/27804?s=200&v=4" alt="Django photo" /> Django </a> </h3> <p class="article-more pt-1">The Web framework for perfectionists with deadlines.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/laravel/laravel"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://laravel.com/img/logomark.min.svg" alt="Laravel photo" /> Laravel </a> </h3> <p class="article-more pt-1">A PHP framework for web artisans</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/d3/d3"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://camo.githubusercontent.com/586ccf0aad9684edc821658cee04146cf36d1f1d5ec904bbefd72728909ccb2e/68747470733a2f2f64336a732e6f72672f6c6f676f2e737667" alt="D3 photo" /> D3 </a> </h3> <p class="article-more pt-1">Bring data to life with SVG, Canvas and HTML. 📊📈🎉</p> </article> </li> <li> <div> </div> </li> </ul> </section> <section> <!-- recommend topics --> <h2 class="h2 py-3.5">Recommend Topics</h2> <ul> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/javascript"> javascript </a> </h3> <p class="article-more pt-1">JavaScript (JS) is a lightweight interpreted programming language with first-class functions.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/web"> web </a> </h3> <p class="article-more pt-1">Some thing interesting about web. New door for the world.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/server"> server </a> </h3> <p class="article-more pt-1">A server is a program made to process requests and deliver data to clients.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/machine-learning"> Machine learning </a> </h3> <p class="article-more pt-1">Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/visualization"> Visualization </a> </h3> <p class="article-more pt-1">Some thing interesting about visualization, use data art</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/game"> Game </a> </h3> <p class="article-more pt-1">Some thing interesting about game, make everyone happy.</p> </article> </li> <li> </li> </ul> </section> <section> <!-- recommend users --> <h2 class="h2 py-3.5">Recommend Org</h2> <ul> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/facebook"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/69631?v=4" alt="Facebook photo" /> Facebook </a> </h3> <p class="article-more pt-1">We are working to build community through open source technology. NB: members must have two-factor auth.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/microsoft"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/6154722?v=4" alt="Microsoft photo" /> Microsoft </a> </h3> <p class="article-more pt-1">Open source projects and samples from Microsoft.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/google"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/1342004?v=4" alt="Google photo" /> Google </a> </h3> <p class="article-more pt-1">Google ❤️ Open Source for everyone.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/alibaba"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/1961952?v=4" alt="Alibaba photo" /> Alibaba </a> </h3> <p class="article-more pt-1">Alibaba Open Source for everyone</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/d3"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/1562726?v=4" alt="D3 photo" /> D3 </a> </h3> <p class="article-more pt-1">Data-Driven Documents codes.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/tencent"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/18461506?v=4" alt="Tencent photo" /> Tencent </a> </h3> <p class="article-more pt-1">China tencent open source team.</p> </article> </li> <li> </li> </ul> </section> </section> </div> </div> <!-- footer --> <footer class="sizeing text-xs text-center p-5"> <div>Friends: <a class="hover:underline" target="_blank" href="https://www.chanpinqingbaoju.com">ProductDiscover</a> </div> Copyright © 2024 Giter Club <!-- & <span class="block md:inline">Data Power by github.com</span> --> ❤️ <a class="hover:underline block md:inline" href="mailto:cs.victor.edison@gmail.com">Mail to me</a> </footer> </body> </html>
rsify
commented on June 5, 2024
rsify
commented on June 5, 2024
rsify
commented on June 5, 2024