0

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.

  • I implemented this and added the template code to my footer template. It's working how I expect it to. I tried the following script from the customizer and it's working as expected in the preview. <script>var newDiv = window.document.createElement("div"); var newContent = window.document.createTextNode("Hi there and greetings!"); newDiv.appendChild(newContent); $('#newsletter').before(newDiv);</script> – MikeNGarrett May 2 '19 at 18:54
  • Interesting. I pasted your code into my customizer field and I got the same results. After digging some more, I noticed a JS error "The XSS Auditor blocked access". I bet you are using FF or IE? This appears to be a Chrome feature to block these requests. I tested outside of Chrome and everything works. – RiddleMeThis May 2 '19 at 19:23
  • Yep, I used Firefox for testing. – MikeNGarrett May 2 '19 at 19:24
  • 1
    Thanks for the help. I updated my question, maybe I will be able to find a work-around in Chrome. – RiddleMeThis May 2 '19 at 19:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.