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. I have an IF in the template that displays a junk of HTML wrapped around the script tags. The form is dynamically generated inside of that HTML.

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 I noticed adding in the script tag is causing an error in Chrome.

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 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 at 19:23
  • Yep, I used Firefox for testing. – MikeNGarrett May 2 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 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.