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
Revered Legend

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
Revered Legend

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
Revered Legend

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
Revered Legend

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!

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

The Transformative Power of AI and ML in Enhancing Observability   In the realm of IT operations, the ...

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...