esc_url on WordPress ACF oEmbed - javascript

I'm using the ACF WordPress plugin to create an oEmbed field. The field accepts a URL from Vimeo and outputs an iframe on the front end.
I usually escape urls and attributes within my theme like so:
<a href="<?= esc_url( get_field('link') ); ?>" title="<?= esc_attr( get_field('title') ); ?>">
When I try and escape the oEmbed, nothing shows up:
<?= esc_url( get_field('video') ); ?>
If I test XSS with the following script, the ACF field completely breaks with a JS error.
<script>alert('hello')</script>
Do I need to escape this field? I assume that WordPress takes care of the escaping through the oEmbed function?

From the official documentation:
The oEmbed field will return a string containing the embed HTML.
Even if the input is of type URL, when getting the value, ACF transforms it to a full HTML embed code. In conclusion, it is wrong to call esc_url on this HTML, you just have to use the_field('video') or echo get_field('video').
As for ACF accepting invalid (non-URL) data in oEmbed type inputs, you can write a custom validator to raise an error, if needed by implementing a filter: acf/validate_value.

Have you tried using the_field() instead of get_field()?
<?= esc_url( the_field('video') ); ?>
The oEmbed actually returns more than just a url so that could be the issue as well. I haven't worked with esc_url() much in the past but it could be breaking because whatever is getting passed through is not only a url.
As stated here, https://www.advancedcustomfields.com/resources/oembed/, "The oEmbed field will return a string containing the embed HTML".

Related

using ajax to pass string from php to javascript

So I have a piece of javascript code in an html document that responds to a button click. I want a new url to open, and if I specify the link in javascript as I've done below, everything works fine.
<input type="submit" id="submitbtn" value="Purchase Module"/>
<script type="text/javascript">
document.getElementById("submitbtn").addEventListener("click",handle_click);
function handle_click() {
var link;
link="http://www.google.com";
window.location.href=link;
}
</script>
Problem is I want to hide the real link on the server side as it includes a username:password. The php script below calls a function (not shown) that generates the link (a string). This also works fine.
<?php
$link=get_page_link();
?>
I want to pass the link string to the javascript and have tried various iterations of
link=<?php echo $link ;?> to no avail. As I understand it you can't pass strings this way and you need to use ajax. That's where I'm stuck. Seems like I need a $_POST on the php side and a $_GET on the java side, but not sure on the specifics. Any help would be appreciated. Thanks.

Can't echo code correctly. CSS dissapears

I want to make an email-signature page with Elementor and then generate the HTML-code like the code when you that appears when you "View Source" of a page, but code gets not exactly correct. I am using a Custom post type and a Elementor template that is not published so it works only when writing: https://mysite123123.com/a/site/?theme_template_id=1164
I have a PHP snippet plugin and this code gets the Post type HTML but not the same like when you press rightclick/View Source. (Its missing some css etc)
Can you see what Im doing wrong or if you know how to echo the correct html from a webpage like a regular visitor see it?
(Im using this code to give a user a HTML signature)
<?php
global $wp;
$vpost = get_post($post_id);
$urlcard = $vpost->post_name;
$current_url = home_url( $wp->request );
$data = file_get_contents("https://mysite123123.com/a/".$urlcard."/?theme_template_id=1164");
$html_encoded = htmlentities($data);
echo $html_encoded;
You can tell the browser how it should render your data using a Content-Type HTTP Response header.
To have your data rendered as plain text -- as the 'View source' view does -- use "text/plain" as mime-type;
header("Content-Type: text/plain");
echo $data

wordpress - php and javascript dont go well together

I know some HTML and CSS but zero JAVA or PHP. I would like to insert LineIt button into my functions.php in WordPress:
The code goes like this:
<img src="imgpath" alt="LINE it!" />
Unfortunately this will display only the line link without my permalink. The_Permalink will be display as text not as dynamically taken URL.
I tried to do something like this:
<img src="linkin" width="[Width of Button]" height="[Height of Button]" alt="LINE it!" />'
But of course that didn't work. Oh and I don't want to use tags <script >.
Could help?
Thanks
Here is the function in my functions.php that I'm trying to modify with custom "LineIT" button:
function show() {
$return = '<aside class="show1 show2">'
. show_content() .
'<div class="show-box">'
. apply_filters('show_filter', show_rander()) .
'<div class="show3">'
. getIcons() .
'</div></div>**<img src="linkin" width="[Width of Button]" height="[Height of Button]" alt="LINE it!" />**<div style="clear:both;"></div>'
. show_content()
. show_content2() .
'</aside>
return apply_filters('show_buttons', $return);
}
according to the document at https://codex.wordpress.org/Function_Reference/the_permalink, the the_permalink() function is usually applied in the template within The Loop. Whereas functions.php is usually provide convenient functions and register them for the future use or register in The Loop.
So put the_permalink() in functions.php might not work as what you expected.
The general template files are like home.php, page.php or category-6.php(which will provide specific template for the category with id as 6).
In these files, the Loop usually is like:
<?php
if(have_posts()){
while(have_posts():
the_post();
the_content();
?>
//here you can add the link
<img src="imgpath" alt="LINE it!" />
<?php
endwhile;
endif;?>
Please refer to this page https://codex.wordpress.org/The_Loop_in_Action for further knowledge of the loop.
if you really want to use the functions.php, I would suggest using the other function get_permalink($id) and get_the_title($id) which will get the permalink of the post by the id and add a function for it. so the function will be:
function get_line($id){
$url = get_permalink($id);
$title = get_the_title($id);
return '<img src="imgpath" alt="LINE it!" />';
}
and then call the function in The Loop of the template.
To learn more about wordpress template, please refer https://developer.wordpress.org/themes/basics/template-hierarchy/
As suggested by #lhrec_106 I have used 3rd option and modified code works like a charm. Thanks!
I have inserted function get_line($id) before my function and then simply entered
. get_line($id) inside my custom function. Button works and share via Line my dynamically generated url.
Thank you

Storing the contents of an external php stylesheet in html

I have a php file that's being used as a dynamic stylesheet. So its a very large file with css/values generated by php. Here's an example.
<?php
header("Content-Type: text/css");
?>
.top {
top: <?= $topValue ?>px;
}
More css...
On a separate file, i'm trying to get the generated content from the php file and store it on the page somewhere so I can get it later with javascript. So the method i'm trying is storing the contents in a hidden input. Like so.
<?php
$file = file_get_contents("FILE_URL.php");
?>
<input type="hidden" name="hidden-css" value="<?= $file ?>" />
However, when I do this, the value contains the raw php from the file and its also commenting out the opening/closing php tags. So for instance, its doing things like '< !--?php' instead of "< ?php" and "?-->" instead of "?>". This messes up the general html on the page and doesn't store the value correctly in the input.
So I ask you, how can I fix the current situation or better store the contents of the stylesheet on the page so I can later grab it and use it with javascript?
EDIT: There may also be an issue with quotes in the generated css causing issues. I'm not sure how to address this issue either.
EDIT: This is how it should be stored if everything worked perfectly.
<input type="hidden" name="hidden-css" value="
.top {
top: 54px;
}
" />
You can't use the file_get_contents() function for this purpose - it simply gets the file contents (i.e. it won't run PHP on that file first).
Instead, as user574632 suggests, you must use include and so your code would look something like this:
<input type="hidden" name="hidden-css" value="<?php include 'FILE_URL.php'; ?>" />
Hopefully that solves your problem.
(Another quick note: Given your main file is HTML not CSS, you will probably need to declare that content header again after the input like this:
<?php header('Content-Type: text/html; charset=utf-8'); ?>
)

How to add inline JavaScript to a wordpress tempate file

How to add inline JavaScript to a WordPress template file?" Plus add it to every post on my page? for instance, <script type="text/javascript">alert('hello world');</script> would be...
Adding it to a template is easy; just stick it within a tag in any part of the template you want to add it to. For instance:
<script>alert('Hello world!');</script>
as an incredibly basic (and kinda messy and improper) way to demonstrate it. Any template file is just a PHP file, or in other words an HTML file with some extra PHP code thrown in.
Also, to add something to a post, you'll want to add it to the appropriate part of your Wordpress template. For instance, in the default Twentytwelve theme, that'd be the content.php file--that contains the code for a single article, and adding something to that will add it to every instance of an article on the page.
To add some javascript to every post on your page just place it inside the loop. Something like:
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
?>
<script type="text/javascript">alert('hello world');</script>
<?php
the_title();
the_excerpt();
} // end while
} // end if
?>
Would add an alert for every post on the page. That would be pretty messy to have a popup for every post but that's the gist.

Categories