title: Embed editable google sheet in React with iframe
body: <p>I've been trying to embed a google sheet in my project. The steps looks pretty straightforward.
  Following the steps from this <a href="https://www.localwebstrategies.com/post/how-to-embed-editable-google-sheets-in-website" rel="nofollow noreferrer">link</a>.
  I got the iframe from the sheet publish menu.</p>
  <p><code>&lt;iframe src=&quot;https://docs.google.com/spreadsheets/d/e/&lt;docId&gt;/pubhtml?widget=true&amp;amp;headers=false&quot;&gt;&lt;/iframe&gt;</code></p>
  <p>Then picked the edit url from sheet sharing menu
  <code>https://docs.google.com/spreadsheets/d/&lt;documentId&gt;/edit?usp=sharing</code></p>
  <p>Then to create the final iframe by combining the above.
  <code>&lt;iframe src=&quot;https://docs.google.com/spreadsheets/d/&lt;documentId&gt;/edit?usp=sharing&amp;amp;widget=true&amp;amp;headers=false&quot;&gt;&lt;/iframe&gt;</code></p>
  <p>This works fine. When i use this iframe in the html for React app.</p>
  <p>Issue:
  When I checked out the console I see 2 errors:</p>
  <p><code>Refused to frame 'https://docs.google.com/' because an ancestor violates the following Content Security Policy directive: &quot;frame-ancestors 'self' https://docs.google.com&quot;.</code></p>
  <p>and</p>
  <p><code>Refused to frame 'https://contacts.google.com/' because an ancestor violates the following Content Security Policy directive: &quot;frame-ancestors https://docs.google.com&quot;.</code></p>
  <p>I've given all possible permissions for edit to on the shared sheet but still can't figure out how to get around these console errors. These errors make the embedded sheet unreliable and unpredictable.</p>
  <p>Any help with this is appreciated.
  Thanks in advance.</p>