The 419 | Page Expired error you're encountering is indeed related to CSRF (Cross-Site Request Forgery) protection, which is a security measure to prevent unauthorized commands from being transmitted from a user that the web application trusts. When you're embedding an iframe that submits a POST request to your application, the CSRF token from the parent page (the page where the iframe is embedded) is not present or doesn't match the one expected by your application.
To solve this issue, you have a couple of options:
-
Disable CSRF Protection for Specific Routes: You can disable CSRF protection for the routes that are used by the widget. This is not recommended for sensitive actions, as it opens up a potential security vulnerability, but it might be acceptable for something like a simple user registration.
In a Laravel application, you can do this by modifying the
VerifyCsrfTokenmiddleware:namespace App\Http\Middleware; use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware; class VerifyCsrfToken extends Middleware { /** * The URIs that should be excluded from CSRF verification. * * @var array */ protected $except = [ 'first-waitlist/widget/submit', // Add your route here ]; } -
CSRF Token in the Iframe: If you want to keep CSRF protection enabled, you need to ensure that the iframe has access to a valid CSRF token when submitting the form. You can pass the CSRF token to the iframe and include it as a hidden input in the form.
In your Laravel view that generates the iframe content, you can do something like this:
<form method="POST" action="https://wl.test/first-waitlist/widget/submit"> @csrf <!-- This blade directive generates a hidden input with the CSRF token --> <!-- Your form fields here --> <input type="text" name="name"> <input type="email" name="email"> <button type="submit">Submit</button> </form>Make sure that the form action points to the correct URL that handles the form submission in your application.
-
API Token Authentication: If you're building a more complex system and you want to ensure better security, consider using API tokens for authentication. This way, you can authenticate the request from the iframe without relying on CSRF tokens. You would need to set up an API route and use token-based authentication (such as Laravel Sanctum or Passport) to handle the request securely.
This approach is more complex and requires a proper understanding of API authentication, but it's a more secure and scalable solution for handling requests from external sources.
Choose the approach that best fits your application's security requirements and the complexity you're willing to manage. If you're going for the first or second option, make sure to understand the security implications of disabling CSRF protection or managing CSRF tokens in iframes.