Grammarly Causing Problems With Stripe - Throws a "blocked a frame with origin" Error

Coffee Lounge
#1

Hey Wappler Gang…

As more people start using my app, I’m finding that if the user has Grammarly installed, it is causing Safari to throw a “blocked a frame with origin” error as the user types their credit card into the stripe elements window.

I’m wondering if anyone else has had this issue and if they found a fix for it!

Best wishes,
Antony.

#2

Have you already tried adding the data-gramm="false" tag to the card element div?

#3

Thanks for the quick response @max_gb!

I was thinking I couldn’t use that as I don’t know the specific HTML element that Stripe will create… but can I just put it on the whole div that Stripe populates then, like this?

<div id="card-element" data-gramm="false">
     <!-- Elements will create input elements here -->
</div>
#4

No that wouldn’t work. I believe the name of the form field for the card number is in fact cardnumber so you could use some javascript for this

// Select the Stripe Card Number field
var stripecard = document.getElementsByName("cardnumber")[0].value;

// Disable Grammarly on the field
stripecard.setAttribute('data-gramm', 'false');

Note I haven’t checked this as I do not use Stripe Elements. This will need to be triggered after Stripe.js has been loaded.

#5

To complement @max_gb’s solution you could use a mutationobserver to set the attribute when the Stripe Elements div is rendered in the DOM.

1 Like
#6

Thanks soooo much for that code @max_gb!

I’ve done an inspect in Developer Tools and found all the names…

So do you think would I put it here, after these lines which read the pk and create the elements?

function set_stripe_pk(pk_key) {
    stripe = Stripe(pk_key);
    elements = stripe.elements();
    card = elements.create('card', { style: style });
    card.mount('#card-element');
    // Select the Stripe input fields
    var id_cardnumber = document.getElementsByName("cardnumber")[0].value;
    var id_expiry = document.getElementsByName("exp-date")[0].value;
    var id_cvc = document.getElementsByName("cvc")[0].value;
    var id_zip = document.getElementsByName("postalCode")[0].value;
    // Disable Grammarly on them
    id_cardnumber.setAttribute('data-gramm', 'false');
    id_expiry.setAttribute('data-gramm', 'false');
    id_cvc.setAttribute('data-gramm', 'false');
    id_zip.setAttribute('data-gramm', 'false');
}
#7

That probably won’t work either as you are trying to set an attribute before the fields have been fully rendered in the DOM. I would create these in a separate function and then call it after everything else has loaded.

1 Like