Dashboards & Visualizations

Form Text Box to URL

ccsfdave
Builder

Greetings,

I would like to create a text input in which I can enter a URL and then click submit then the panel below would display an internet webpage.

To better explain, I would enter ak.imgfarm.com then click submit

and the panel below would display the webpage:

http://www.google.com/safebrowsing/diagnostic?site=**ak.imgfarm.com**

Tags (2)
0 Karma
1 Solution

somesoni2
SplunkTrust
SplunkTrust

Try the following: If you get any error like "The content cannot be displayed in a frame", try adding the URL in your trusted sites.

<view autoCancelInterval="90" isVisible="true" onunloadCancelJobs="true" template="dashboard.html" stylesheet="application.css">
    <label>Test Sideview IFrame</label>
    <module name="AccountBar" layoutPanel="appHeader"/>
    <module name="AppBar" layoutPanel="appHeader" />
    <module name="SideviewUtils" layoutPanel="appHeader" />
    <module name="Message" layoutPanel="messaging">
        <param name="filter">*</param>
        <param name="clearOnJobDispatch">False</param>
        <param name="maxSize">1</param>
    </module>
    <module name="Message" layoutPanel="messaging">
        <param name="filter">splunk.search.job</param>
        <param name="clearOnJobDispatch">True</param>
        <param name="maxSize">1</param>
    </module>


    <module name="URLLoader" layoutPanel="panel_row1_col1" autorun="True">
        <module name="TextField">
            <param name="name">url</param>
            <param name="label">Enter the URL you would like to check:</param> 
            <param name="float">left</param>
            <module name="Button" layoutPanel="panel_row1_col1">
                <param name="allowSoftSubmit">True</param>
                <param name="label">Refresh</param>
                <module name="ValueSetter" layoutPanel="panel_row1_col1">
                    <param name="name">url</param>
                    <param name="urlEncodeKeys">url</param>
                    <param name="value">$url$</param>
                    <module name="HTML" layoutPanel="panel_row1_col2">
                        <param name="html">
                        <![CDATA[
                        <iframe id="googleurl" name="googleurl" src="http://www.google.com/safebrowsing/diagnostic?site=$url$"></iframe>
                        ]]></param>
                    </module>
                </module>
            </module>
        </module>
    </module>
</view>

View solution in original post

sideview
SplunkTrust
SplunkTrust

The approach works fine, but what's happening is that that particular site doesn't allow "cross-origin-framing".

https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options

If you dig around and turn on the console, look you'll see this little error coming out in your browser's console.

Load denied by X-Frame-Options: http://www.google.com/safebrowsing/diagnostic?site=google.com does not permit cross-origin framing.

If i put one of my own domains that doesnt do any magic with X-Frame-Options, then somesoni2's XML works fine.

0 Karma

somesoni2
SplunkTrust
SplunkTrust

Try the following: If you get any error like "The content cannot be displayed in a frame", try adding the URL in your trusted sites.

<view autoCancelInterval="90" isVisible="true" onunloadCancelJobs="true" template="dashboard.html" stylesheet="application.css">
    <label>Test Sideview IFrame</label>
    <module name="AccountBar" layoutPanel="appHeader"/>
    <module name="AppBar" layoutPanel="appHeader" />
    <module name="SideviewUtils" layoutPanel="appHeader" />
    <module name="Message" layoutPanel="messaging">
        <param name="filter">*</param>
        <param name="clearOnJobDispatch">False</param>
        <param name="maxSize">1</param>
    </module>
    <module name="Message" layoutPanel="messaging">
        <param name="filter">splunk.search.job</param>
        <param name="clearOnJobDispatch">True</param>
        <param name="maxSize">1</param>
    </module>


    <module name="URLLoader" layoutPanel="panel_row1_col1" autorun="True">
        <module name="TextField">
            <param name="name">url</param>
            <param name="label">Enter the URL you would like to check:</param> 
            <param name="float">left</param>
            <module name="Button" layoutPanel="panel_row1_col1">
                <param name="allowSoftSubmit">True</param>
                <param name="label">Refresh</param>
                <module name="ValueSetter" layoutPanel="panel_row1_col1">
                    <param name="name">url</param>
                    <param name="urlEncodeKeys">url</param>
                    <param name="value">$url$</param>
                    <module name="HTML" layoutPanel="panel_row1_col2">
                        <param name="html">
                        <![CDATA[
                        <iframe id="googleurl" name="googleurl" src="http://www.google.com/safebrowsing/diagnostic?site=$url$"></iframe>
                        ]]></param>
                    </module>
                </module>
            </module>
        </module>
    </module>
</view>

ccsfdave
Builder

Yup, now I see it is Google's safebrowsing site that doesn't work but the above XML works like a charm. I added some sizing to the iFrame tag but the main functionality is there. Thanks @somesoni2 & @sideview

0 Karma

ccsfdave
Builder

Unfortunately this doesn't work. I get a text submission box on the left with a submit button. On the right I show an empty "text area" like box. What I would like to show is the webpage

0 Karma

somesoni2
SplunkTrust
SplunkTrust

See the answer below. Its shows the ways to show a webpage in the panel. Further, you can save the value of the textbox in a variable and dynamically assign in the IFrameInclude module property (if using Core SPlunk xml) or iframe tag of Sideview HTML module.

ShowWebPageInAPanel

0 Karma

somesoni2
SplunkTrust
SplunkTrust

Any specific error your are getting in the iFrame panel??

0 Karma

ccsfdave
Builder


url
url
$url$


<![CDATA[
]]>

0 Karma

ccsfdave
Builder

what am I doing wrong?


url
Enter the URL you would like to check:
left


True
Refresh

0 Karma
Get Updates on the Splunk Community!

Routing logs with Splunk OTel Collector for Kubernetes

The Splunk Distribution of the OpenTelemetry (OTel) Collector is a product that provides a way to ingest ...

Welcome to the Splunk Community!

(view in My Videos) We're so glad you're here! The Splunk Community is place to connect, learn, give back, and ...

Tech Talk | Elevating Digital Service Excellence: The Synergy of Splunk RUM & APM

Elevating Digital Service Excellence: The Synergy of Real User Monitoring and Application Performance ...