Support iframes in annotation screenshots

When you create an annotation, Cord takes a screenshot of the document and stores it alongside the annotation.

If the document contains iframes, things can get interesting:

Same Origin #

If the <iframe>'ssrc attribute is from the same origin as the document, then Cord will correctly capture the contents of that<iframe> in the screenshot, with no special tweaks needed from the developer

Different Origin, But You Have Control #

If the <iframe>'ssrc attribute is from a different origin than the document, and you can change the HTML inside the <iframe>, then a script tag must be added to the HTML of the <iframe> document. This script will set the necessary security settings in the page necessary to enable a parent window to capture a screenshot of its contents.

<!-- this script allows the Cord SDK to communicate with this iframe when taking screenshots -->
<script src="https://app.cord.com/sdk/v1/iframe.js"></script>
            

<!-- this script allows the Cord SDK to communicate with this iframe when taking screenshots -->
<script src="https://app.cord.com/sdk/v1/iframe.js"></script>
            

Different Origin, But You Don't Have Control #

If the <iframe>'ssrc attribute is from a different origin than the document, and the <iframe> content is outside the control of the developer, then the area of the <iframe> will be replaced with a "Content not available" placeholder in the screenshot