It is not possible to download files through embedded content in Story Maps using a Chromium browser. The iframe element should contain sandbox="allow-downloads".
This has been a requirement since Chrome 83:
Download in Sandboxed Iframes - Chrome Platform Status
Add spec for 'sandboxed downloads' flag by xyaoinum · Pull Request #4293 · whatwg/html · GitHub
The generated iframe code currently inclides sandbox="allow-scripts allow-same-origin allow-forms allow-popups". I have tried adding the allow-downloads attribute in a custom iframe code, but the attribute is removed by Story Maps automatically.
This feature is quite essential to a tool we are developing, and would be nice to see implemented as soon as possible.
Solved! Go to Solution.
Hello -- We looked into adding allow-downloads and unfortunately this is not something that is compatible with our security policies at this time. Additionally, allow-downloads is currently an experimental parameter and is not recommended for production environments.
I'm sorry this impacts your plan for your interactive story; however, I would add that we often find that how-to/instructional stories are typically most effective when they use screenshots/videos/gifs. While embedding an interactive tool in the story side-by-side with the instructions may seem helpful, many authors find that this serves to distract their readers rather than help. With screenshots/gifs, your audience can focus on what your story is trying to communicate about the tool rather than fiddling with the tool itself while trying to learn how to use it. Another advantage is you can markup the screenshots or record a video/GIF that illustrates exactly what you want your readers to focus on.
Here are a few examples of instructional stories that use screenshots/videos to good effect:
Hi -- Thanks for this feedback and feature request. Can you please provide a little more information about the web page you want to embed, what readers need to download, and the experience it provides? For security reasons, this is not something we want to just enable for all stories, but if we can understand more about your use case we may be able to look at a way to allow this in a future release.
For now, would you be able to provide readers with the ability to download files by inserting standard hyperlinks and/or button links directly to the files? Alternatively, you could provide a link to the web page you have developed that provides the download capability and have readers open it in a separate browser tab.
Hi Owen,
Thanks for the quick response!
We want to embed a website running a screening tool based on ArcGIS JS API. The tool loads data (geometries and tables) from ArcGIS Online and performs various distance and intersect calculations to build a screening result table. The user is able to filter the results and export to PDF and Excel. The Story Map is used to explain the functionality and output of the tool.
The data is unfortunately not publicly available, so I cannot share a version of the tool that actually works without login and access to the ArcGIS Online layers.
The PDF and Excel files are created client side using different JS libraries. Both libraries are dependent on being able to initiate a file download through code, which is what is being blocked by the iframe sandbox. This is the cleanest solution, as everything runs on the client machine. Alternatively, we need to create and store the exports server side, provide a link to the user and then remove the exported files from the server once the file is downloaded. This is a bit messy and requires a rewrite of the exporting using server side libraries, which we would rather avoid if possible.
For now we have to provide a link to the tool as you suggest. However, we want to use an interactive Story Map to guide the user, and having to open new tabs messes that user experience up.
Thanks for looking into this. I hope you will be able to provide a way to allow the downloads in the future.
Hello -- We looked into adding allow-downloads and unfortunately this is not something that is compatible with our security policies at this time. Additionally, allow-downloads is currently an experimental parameter and is not recommended for production environments.
I'm sorry this impacts your plan for your interactive story; however, I would add that we often find that how-to/instructional stories are typically most effective when they use screenshots/videos/gifs. While embedding an interactive tool in the story side-by-side with the instructions may seem helpful, many authors find that this serves to distract their readers rather than help. With screenshots/gifs, your audience can focus on what your story is trying to communicate about the tool rather than fiddling with the tool itself while trying to learn how to use it. Another advantage is you can markup the screenshots or record a video/GIF that illustrates exactly what you want your readers to focus on.
Here are a few examples of instructional stories that use screenshots/videos to good effect:
Hi Owen,
Thanks for the answers and recommendations! It is unfortunate that we cannot do this, but we will make do with a link to the tool and some graphics in the StoryMap.
Hello,
Resurrecting an old thread here... but If you're running Enterprise and able to add a script to the Experience Builder page, we were able to find success monkey patching the embed widget:
document.addEventListener("DOMContentLoaded", async function () {
const patchEmbedWidget = async function () {
const embedImport = await window.SystemJS.import("widgets/common/embed/dist/runtime/widget");
if (embedImport && embedImport.default) {
let patchedEmbedWidget = class extends embedImport.default {
constructor() {
super(...arguments);
const originalCheckSafeDomain = this.checkSafeDomain;
this.checkSafeDomain = url => {
if (url && url.indexOf("https://customdomain.com") === 0) {
return true;
}
return originalCheckSafeDomain(url);
}
}
}
embedImport.default = patchedEmbedWidget;
}
}
await patchEmbedWidget()
});
This is susceptible to breaking changes on upgrades of course, and is fully unsupported. But it allows us now to download through iframes by marking our custom domain as trusted. Make sure the embed widget is configured for "URL" instead of "Code"