Hi, I am new to Docusign and I am working on a POC for integrating DocuSign Embedded Signing using Docusign JS  within a Vue.js application. I am using the DocuSign Python Quick Start project to generate the signing URL with a slight modification:

• Instead of redirecting after generating the signing URL, I print it to the console.
• I manually copy this URL into a static variable in my Vue.js app and load it Docusign JS

Problem

With a fresh signing URL:
I receive the ready DOM event callback.
The signing session renders successfully inside the <iframe>.
After completing the signing, I receive the sessionEnd DOM event callback.

However, when I reuse the same signing URL:
No DOM events (ready, sessionEnd, or any error) are triggered by DocuSign JS.

Expected Behavior

If the signing link is expired or reused, I would expect:

• An error from DocuSign JS instead of silent failure.
• A sessionEnd event with a reason like `ttl_expired`.

The Vue.js script

<template>
  <div class="signing-container">
    <button @click="startSigning" class="sign-btn">Start Signing</button>
    <div v-if="loading" class="loading">Loading...</div>
    <div id="docusign-container" v-show="isSigning"></div>
    <p v-if="error" class="error">{{ error }}</p>
  </div>
</template>

<script lang="ts">
export default {
  data() {
    return {
      signingUrl:'<url_generated_by_python_quick_start>',
      clientId: '<client_id_from_my_developer_account>',
      isSigning: false,
      loading: false,
      error: null,
      signingStatus: null,
    }
  },
  methods: {
    async startSigning() {
      this.loading = true
      this.error = null
      this.signingStatus = null

      const signElId = 'docusign-container'
      const signatureConfiguration = {
        url: this.signingUrl,
        displayFormat: 'default',
        style: {
          /** High-level variables that mirror our existing branding APIs. Reusing the branding name here for familiarity. */
          branding: {
            primaryButton: {
              /** Background color of primary button */
              backgroundColor: 'darkblue', // Use CSS color names
              /** Text color of primary button */
              color: 'lightyellow',
            },
          },
          /** High-level components we allow specific overrides for */
          signingNavigationButton: {
            finishText: 'Signed!', // default is Submit
            // 'bottom-left'|'bottom-center'|'bottom-right',  default: bottom-right
            position: 'bottom-right',
          },
          signingDeclineButton: {
            show: true, // planned feature
          },
        },
      }

      this.isSigning = true

      try {
        // Use DocuSign JS SDK to launch signing
        const docusign = await window.DocuSign.loadDocuSign(this.clientId)
        const signing = docusign.signing(signatureConfiguration)

        /** Event handlers **/
        signing.on('ready', (event) => {
          // $(`#${signElId} > iframe`).css('height', `${window.innerHeight - padding}px`);
          // window.scroll(0, 0); // for iOS

          console.log('UI is rendered: ', event)
        })
        signing.on('sessionEnd', (event) => {
          /** The event here denotes what caused the sessionEnd to trigger, such as signing_complete, ttl_expired etc../ */
          console.log('sessionEnd', event)
          this.signingStatus = event.sessionEndType
          // Event: { returnUrl: url, type: "sessionEnd", sessionEndType: "signing_complete"}
        })

        signing.mount(`#${signElId}`)
      } catch (err) {
        this.error = 'Failed to load signing session. Please try again.'
        console.error(err)
      } finally {
        this.loading = false
      }
    },
  },
}
</script>

<style>
.signing-container {
  text-align: center;
  margin-top: 20px;
  width: 80%;
  height: 100vh;
}

.sign-btn {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

#docusign-container {
  width: 100%;
  height: 100vh;
  margin-top: 20px;
  border: 1px solid #f00;
}

.loading {
  margin-top: 10px;
  font-size: 14px;
  color: gray;
}

.error {
  color: red;
  font-weight: bold;
}
</style>

And I am adding the Docusign JS in my index.html like below

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <script src="https://js-d.docusign.com/bundle.js"></script>
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Error from the console

Refused to frame 'http://localhost:5173/' because it violates the following Content Security Policy directive: "frame-src 'self' https://docucdn-a.akamaihd.net/ https://apps-d.docusign.com https://demo.docusign.net https://account-d.docusign.com https://esign-uat.jpmorgan.com https://esign-uat.chase.com https://esign.jpmorgan.com https://esign.chase.com https://verify-d.docusign.net https://verify.docusign.net".

docucdn-a.akamaihd.net/:1 Refused to frame 'https://localhost:5173/' because it violates the following Content Security Policy directive: "frame-src 'self' https://docucdn-a.akamaihd.net/ https://apps-d.docusign.com https://demo.docusign.net https://account-d.docusign.com https://esign-uat.jpmorgan.com https://esign-uat.chase.com https://esign.jpmorgan.com https://esign.chase.com https://verify-d.docusign.net https://verify.docusign.net".

The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

Questions

1. Why am I getting the `Refused to frame...` error when I try to load the URL the second time but don’t get this error when loading it the first time?
2. Why does DocuSign JS not trigger any events or errors when reusing a signing URL?
3. Are there additional events I should register with DocuSign JS to capture errors or session failures?

Concern

If this behavior occurs in production due to any unexpected reason, it could become a blocking issue for users. 

Any insights or suggestions would be greatly appreciated!

Tech Stack:

1. Vue.js (Frontend)
2. DocuSign JS (Embedded Signing)
3. Python Quick Start (Flask) (Backend for generating the signing URL)

Both the python quick start app and vue.js apps are running locally on my machine.

Thanks in advance!