Failed to read "sessionStorage" error when embed Formbuilder in iframe

[chenster]

Description:

When embed FormBuilder in iframe hosted on a different domain, it returns DOMException: Failed to read the 'sessionStorage' property from 'Window': Access is denied for this document.

Environment Details:

• formBuilder Version: 2.9.8
• Browser: Chrome 86.0.4240.80 (Official Build) (x86_64)
• OS: MacOS Catalina

Expected Behavior

Embedded form should display

Actual Behavior

Not displaying at all

Steps to Reproduce

Create a form in Domain A, and host it in a iFramed on Domain B

Screenshot - (optional)

[kevinchappell]

this is a cross-domain permissions issue. you can write a sessionStorage wrapper that does something similar to this: https://levelup.gitconnected.com/share-localstorage-sessionstorage-between-different-domains-eb07581e9384

The other option is disable sessionStorage in formBuilder. This should really be configurable anyways so PR more than welcome

[chenster]

How can one disable the sessionStorage safely? Wouldn't it break the form? I noticed about just two lines actually reference sessionStorage.

A.prototype.orderFields = function(A) {
  | var e, t = d.config.opts,
  | r = t.controlOrder.concat(A);
  | return window.sessionStorage && (t.sortableControls ? e = window.sessionStorage.getItem("fieldOrder") : window.sessionStorage.removeItem("fieldOrder"))

[kevinchappell]

@chenster I mean we should probably add an option to formBuilder like disableSessionStorage as formBuilder doesn't rely on it outside of saving the control order which is low priority feature:

formBuilder/src/js/helpers.js

Line 712 in c072cae

setFieldOrder($cbUL) {

An alternative to disabling sessionStorage could be onSaveFieldOrder and onLoadFieldOrder option where the user can define the methods used to store fieldOrder (control order).

[chenster]

I think I can do something like adding option for disable/enable control order. Thanks.