I have a simple textarea setup in the customizer that I want to use for including a 3rd party form. In order to embed this form I need to paste in 2 script tags into the textarea.
This all works fine but I can't seem to get the live preview to work when adding in the script tags. It does update when removing the script tags from the textarea but doesn't when I add them back in. However, publishing the customizer and refreshing the frontend shows me the form correctly.
Customizer Settings
function theme_options($wp_customize) {
// Add Panel
$wp_customize->add_panel('footer_options',
array(
'title' => __('Footer Options'),
'priority' => 210
)
);
// Add Section
$wp_customize->add_section('footer_options_newsletter_signup',
array(
'title' => __('Newsletter Signup'),
'panel' => 'footer_options'
)
);
// Add Setting
$wp_customize->add_setting('footer_options_newsletter_signup_textarea',
array(
'default' => '',
'sanitize_callback' => ''
)
);
// Add Control
$wp_customize->add_control('footer_options_newsletter_signup_textarea',
array(
'label' => __('Cognito Script Tags'),
'description' => esc_html__('Copy the code from Cognito and it will include a newletter signup form in the footer.'),
'section' => 'footer_options_newsletter_signup',
'type' => 'textarea'
)
);
};
add_action('customize_register', 'theme_options');
Template Code
<?php
$newletter_signup = get_theme_mod('footer_options_newsletter_signup_textarea');
?>
<?php if($newletter_signup){ ?>
<div id="newsletter">
<div>
<h2>Subscribe to <span>our newsletter</span></h2>
<div class="form">
<div class="cognito">
<?php echo $newletter_signup; ?>
</div>
</div>
</div>
</div>
<?php } ?>
Notes
- I removed any sanitization by setting
'sanitize_callback' => ''
- I tried creating my own sanitization function that just returned the value
- Everything works as expected if I just paste in a string and not the
<script>
tags - I realize I could include the script tags in the template so they don't have to be pasted into the customizer but that isn't ideal
$newletter_signup
is still empty in the preview if I only put in a<script>
tag
Update
After some testing, this appears to only be an issue with Chrome, the script tag is generating the following error (in Chrome only).
The XSS Auditor blocked access to 'http://localhost/?customize_changeset_uuid=d1fb81cd-ab2f-48bf-96c5-889972def725&customize_theme=my_theme&customize_messenger_channel=preview-2&customize_autosaved=on' because the source code of a script was found within the request. The auditor was enabled as the server did not send an 'X-XSS-Protection' header.
Everything works as expected in other browsers.