Skip to content

Commit eb615b6

Browse files
author
Yannick Le Saout
committed
updated the documentation for the iframe option
1 parent 97e8179 commit eb615b6

File tree

1 file changed

+35
-0
lines changed

1 file changed

+35
-0
lines changed

README.md

+35
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,8 @@ connection.promise.then(parent => {
9595

9696
`options.appendTo` (optional) The element to which the created iframe should be appended. If not provided, the iframe will be appended to `document.body`.
9797

98+
`options.iframe` (optional) The iframe element that Penpal will use instead of creating the iframe element itself. This iframe element must not be already attached to the DOM as it will be appended by Penpal. This option is useful if you need to set attributes to the iframe element before it is appended to the DOM, for example the sandbox attribute. Note that the src attribute will be set by Penpal with the `options.url` value, even if already set.
99+
98100
`options.methods` (optional) An object containing methods which should be exposed for the child iframe to call. The keys of the object are the method names and the values are the functions. If a function requires asynchronous processing to determine its return value, make the function immediately return a promise and resolve the promise once the value has been determined.
99101

100102
`options.timeout` (optional) The amount of time, in milliseconds, Penpal should wait for the child to respond before rejecting the connection promise. There is no timeout by default.
@@ -165,6 +167,39 @@ import {
165167

166168
This provides an opportunity for build optimization (using tools like Webpack or Rollup) in cases where code only needs access to the error constants and not the rest of Penpal.
167169

170+
## Security Note
171+
172+
Penpal does not set the sandbox attribute on the iframe element it creates. If you need to sandbox the iframe, you must, in the parent, create the iframe element, set its sandbox attribute and call the connectToChild API with the created iframe. Here is an example setting the sandbox attribute in the parent window :
173+
174+
175+
```javascript
176+
import Penpal from 'penpal';
177+
178+
const iframe = document.createElement('iframe');
179+
iframe.sandbox = 'allow-scripts';
180+
181+
const connection = Penpal.connectToChild({
182+
// URL of page to load into iframe.
183+
url: 'http://example.com/iframe.html',
184+
// Container to which the iframe should be appended.
185+
appendTo: document.getElementById('iframeContainer'),
186+
// The iframe element to use
187+
iframe: iframe,
188+
// Methods parent is exposing to child
189+
methods: {
190+
add(num1, num2) {
191+
return num1 + num2;
192+
}
193+
}
194+
});
195+
196+
connection.promise.then(child => {
197+
child.multiply(2, 6).then(total => console.log(total));
198+
child.divide(12, 4).then(total => console.log(total));
199+
});
200+
```
201+
202+
168203
## Supported Browsers
169204

170205
Penpal is designed to run successfully on the most recent versions of Internet Explorer, Edge, Chrome, Firefox, and Safari.

0 commit comments

Comments
 (0)